타입스크립트 - interface

반복되는 객체 키-값의 타입 선언 코드를 인터페이스로 추상화 할수 있다. -> 가독성과 유지보수성을 높이기 위함 

interface Product {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
}

앞글자는 대문자를 사용한다. 

 

인터페이스 간의 상속이 가능하다.

interface ClothingProduct extends Product {
  sizes: Size[];
}

const product1: ClothingProduct = {
  id: 'c001',
  name: '코드잇 블랙 후드 집업',
  price: 129000,
  membersOnly: true,
  sizes: [Size.M, Size.L],
};

const product2: Product = {
  id: 'd001',
  name: '코드잇 텀블러',
  price: 25000,
};

ClothingProduct 는 Product를 상속하는 인터페이스이다.

 

 

인터페이스로 변수와 함수의 타입을 지정할 수 있다.

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

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


// Interface 를 사용한 함수 표현식
const printProduct :PrintProductFunction = fucntion(product : Product) {
  console.log(`${product.name}의 가격은 ${product.price}원입니다.`)
}

함수 파라미터와 반환 타입을 명시한 PrintProductFunction  인터페이스를 선언 

 

기존 함수는 Product 타입의 객체를 인자로 받아 콘솔에 출력하는 함수이다.

 

printProduct 는 printProductFunction 인터페이스를 타입으로 하는 함수이다. 

따라서 이 함수는 printProductFunction 인터페이스에 정의된 파라미터와 반환값의 타입을 따라야한다.