Interface vs Type

타입을 선언하는 데에는 두가지 방법이 있습니다.

type Tstate = {
    name: string;
    captial: string;
}

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

대부분의 경우에는 타입을 사용해도 되고 인터페이스를 사용해도 됩니다. 하지만 타입과 인터페이스에 존재하는 차이를 분명하게 알고, 같은 상황에서는 동일한 방법으로 명명된 타입을 정의해 일관성을 유지해야 합니다.

비슷한 점

• 명명된 타입은 인터페이스, 타입 둘다 차이가 없다. 둘 다 모두 추가 속성과 함께 할당한다면 동일한 오류가 발생합니다.

const test: TState = {
    name: 'name',
    capital: 'capital',
    population: 500_000 // 'TState' 형식에 'population'이 없습니다.
}

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

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

interface IDict {
    [key: string]: string;
};

• 함수 타입도 둘 다 사용 가능하다.

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; };

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

• 클래스를 구현할 때는 둘다 가능합니다.

class StateT implements TState {
    name: string = '';
    capital: string = '';
}

class StateI implements IState {
    name: string = '';
    capital: string = '';
}

차이점

• 유니온 타입은 있지만 유니온 인터페이스라는 개념은 없습니다. 인터페이스는 타입을 확장할 수 있지만, 유니온은 할 수 없습니다. 다음과 같은 타입은 인터페이스로 표현할 수 없습니다.

type AorB = 'a' | 'b';

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

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

• 튜플과 배열 타입도 type 키워드를 사용하면 간결하게 표현 가능합니다.

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

인터페이스로도 튜플과 비슷하게 구현은 가능합니다.

interface Tuple {
    0: number;
    1: number;
    length: 2;
}

const t: Tuple = [10, 20];

하지만 튜플에서 사용할 수 있는 concat과 같은 메서드를 사용할 수 없습니다. 튜플은 type 키워드로 구현합시다.

• 인터페이스만 보강 기능을 사용할 수 있습니다.

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

interface IState {
    population: number;
}

const test: IState = {
    name: 'name',
    capital: 'capital',
    population: 500_500
}

속성을 확장하는 것을 선언 병합이라고 합니다. 주로 타입 선언 파일에서 사용되며 타입 선언 파일을 작성할 때에는 선언 병합을 지원하기 위해 반드시 인터페이스를 사용해야 합니다.

정리

타입은 기존 타입에 추가적인 보강이 없는 경우에만 사용해야 합니다. 복잡한 타입이라면 타입 별칭을 사용하면 되고 간단한 객체 타입이라면 일관성과 보강의 관점에서 고려해봐야 합니다.