타입스크립트 "인터페이스"

인터페이스는 객체의 세부 타입을 정해주는 예약어이다.

interface Person {
  name: string;
  age: number;
}

 

인터페이스는 자바스크립트의 클래스 상속처럼 "상속"을 할 수 있다.

주의할 점은 부모가 정한 타입은 바꾸지 못한다는 점이다.

interface Hero {
  name: string;
  skill: string;
}

interface IronMan extends Hero {
  HP: number;
  // skill: number; (이렇게 쓰면 안돼요!)
}

 

인터페이스는 "인덱스 시그니처"라는 것도 있다.

지금까지는 프로퍼티 이름: 타입; 이런 식으로 프로퍼티를 지정했다면,

인덱스 시그니처는 인덱스의 타입에 따라 지정해주는 방식이다.

인덱스 타입이란, 예를 들어 배열은 a[3], b[2] 이렇게만 접근 가능하니까 인덱스 타입이 number이고,

객체는 a['name'] 이렇게 접근 가능하니 인덱스 타입은 string도 가능하다.

인덱스 시그니처를 쓰면, 프로퍼티 이름은 정확히 모르지만, 타입은 알고 있을 때 노가다를 안해도 된다.

interface User {
  id: number;
  name: string;
  [property: string]: string;
}