타입스크립트 베이직 - 5: Interface

똑같은 객체타입을 여러번 정의하는 것은 비효율적이며 앞으로의 유지보수도 불편하질 수 있다.

const product1: {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
} = {
  id: "1",
  name: "반팔",
  price: 4000,
  membersOnly: true,
};

const product2: {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
} = {
  id: "2",
  name: "머그컵",
  price: 5000,
};

만약 product가 100000개 있다면... 생각만해도 끔찍하다 😩
그래서 다음과 같이 인터페이스를 활용할 수 있다.

인터페이스 선언법

interface Product { // 대문자!
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
};

인터페이스 사용법

const product1: Product = {
  id: "1",
  name: "반팔",
  price: 4000,
  membersOnly: true,
};

const product2: Product = {
  id: "2",
  name: "머그컵",
  price: 5000,
};

function printProduct(product: Product) {
  console.log(`${product.name}의 가격은 ${product.price}원입니다.`)
}

인터페이스 상속

인터페이스는 클래스문법과 아주 흡사하며
상속(Extends)이 가능하다.

상속은 중복을 줄여주고 부모의 클래스의 수정으로 모든 자식 클래스를 수정할 수 있기 때문에
유지보수성의 극적 상승을 가져다 준다.

interface Product { // 상위 개념: 제품
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
};

interface ClothingProduct extends Product { // 하위 개념: 의류제품
	sizes: Size[];
};

const product1: ClothingProduct = { // 하위 개념: 의류제품
  id: "1",
  name: "반팔",
  price: 4000,
  membersOnly: true,
  Sizes: [Size.M, Size.L], // Sizes를 추가입력
};

const product2: Product = { // 상위 개념: 제품
  id: "2",
  name: "머그컵",
  price: 5000,
  Sizes: [Size.M, Size.L],
};

function printProduct(product: Product) { // 상위 개념이므로 모든 상품 파라미터 대입 가능.
  console.log(`${product.name}의 가격은 ${product.price}원입니다.`)
}

함수 인터페이스 사용법

interface PrintProductFunction {
	(product: Product): void;
}

function printProduct: PrintProductFunction = (product) {
  console.log(`${product.name}의 가격은 ${product.price}원입니다.`)
}