아이템13) 타입과 인터페이스의 차이점 알기

공통점)

type TState = {
  name: string;
  capital: string;
};

interface IState {
  name: string;
  capital: string;
}

인터페이스나 타입에 추가 속성과 함께 할당한다면 동일한 오류가 발생합니다.

인덱스 시그니처는 인터페이스와 타입에서 모두 사용할 수 있습니다.

 type TDict = { [key: string]: string };
interface IDict {
  [key: string]: string;
}

• 인덱스 시그니처란?
  인덱스 시그니쳐(Index Signature)는 {[key : T] : U}형식으로 객체가 여러 Key를 가질 수 있으며 Key와 매칭되는 value를 가지는 경우 사용한다.

함수 타입도 인터페이스나 타입으로 정의할 수 있습니다.

type TFn = (x: number) => string;
interface IFn {
  (x: number): string;
}

const toStrT: TFn = x => '' + x;
const toStrI: IFn = x => '' + x; 

타입 별칭과 인터페이스 모두 제네릭이 가능합니다.

type TPair<T> = {
  first: T;
  second: T;
};
interface IPair<T> {
  first: T;
  second: T;
}

인터페이스는 타입을 확장할 수 있습니다. 단, 유니온 타입 같은 복잡한 타입을 확장하지는 못합니다. 복잡한 타입을 확장하고 싶다면 타입과 &을 사용해야합니다.
타입은 인터페이스를 확장할 수 있습니다.

interface IStateWithPop extends TState {
  population: number;
}
type TStateWithPop = IState & { population: number; };

클래스 구현(implements)할 때는, 타입과 인터페이스 둘 다 사용할 수 있습니다.

class StateT implements TState {
  name: string = "";
  capital: string = "";
}
class StateI implements IState {
  name: string = "";
  capital: string = "";
}

차이점)

인터페이스는 타입을 확장할 수 있지만, 유니온은 할 수 없습니다.

유니온 타입에 속성을 붙여 타입을 만들 수도 있습니다.

type NamedVariable = (Input | Output) & { name: string };

하지만 이 타입은 인터페이스로 표현할 수 없습니다. type 키워드는 일반적으로 interface보다 쓰임새가 많습니다. type 키워드는 유니온이 될 수도 있고, 매핑된 타입 또는 조건부 타입 같은 고급 기능에 활용되기도 합니다.

튜플과 배열도 type을 이용해 더 간결하게 표현 할 수 있습니다.

type Pair = [number, number];
type StringList = string[];
type NamedNums = [string, ...number[]];

인터페이스도 튜플과 비슷하게 할 수 있지만, 튜플에서 사용하는 concat 같은 메서드를 사용할 수 없습니다.

반면에, 인터페이스에는 타입에 없는 몇 가지 기능이 있습니다. 그중 하나는 바로 '보강(augment)'이 가능하다는 것입니다.

interface IState {
  name: string;
  capital: string;
}
interface IState {
  population: number;
}
const wyoming: IState = {
  name: 'Wyoming',
  capital: 'Cheyenne',
  population: 500_000
};  //결과 정상

위와 같이 속성을 확장하는 것을 '선언병합'이라고 합니다.

병합되는 것을 원치 않는다면 인터페이스 대신 타입을 사용해야 합니다.

복잡한 타입이라면 타입별칭을 사용하는 것이 났습니다.

프로젝트에서 어떤 문법을 사용할지 결정할 때 한 가지 일관된 스타일을 확립하고, 보강 기법이 필요한지 고려해야합니다.

주의

타입을 I(인터페이스) 또는 T(타입)로 시작해 어떤 형태로 정의 되었는지 나타냅니다. 하지만 실제 코드에서는 이렇게 하면 안됩니다. 인터페이스 접두사로 I를 붙이는것은 C#에서 비롯되었습니다. 타입 스크립트 초기에는 종종 사용하였으나 현재는 지양해야 할 스타이로 여겨집니다. 표준 라이브러리에서도 일관성 있게 도입되지 않았지 때문에 유용하지도 않습니다.

출처

<이펙티브 타입스크립트> (댄 밴더캅 지음, 장원호 옮김, 인사이트, 2021)