[TS] type과 interface 차이

type과 interface 키워드는 타입을 정의할 때 사용한다. 

보통 React app 내에서는 component에 넘겨주는 props의 타입을 정의하기 위해 아래와 같이 사용하곤 한다.

type GreetingsProps = {       //type 사용해도 정상 작동
  name: string;
};

interface GreetingsProps {   //interface 사용해도 정상 작동
  name: string;
};

const Greetings = ({ name }: GreetingsProps) => (
  <h1>Hello, {name}</h1>
);

이 두 키워드 둘 다 타입 정의라는 비슷한 역할을 하기 때문에 차이점과 언제, 어느 상황에 어떤 키워드를 사용하는 것이 적절할지 짚고 넘어갈 필요가 있다.

 

❗ 뭐가 다른 걸까? 차이점에 대해서 알아보자.

 

1️⃣ 타입을 확장하는 방식

이미 지정한 타입을 확장하고자 할 때, type은 & 연산자, interface는 extends 키워드를 이용한다. 또한, interface의 경우 동일한 이름으로 다시 interface를 정의해 확장하는 것이 가능하지만 type은 동일한 이름으로 다시 선언할 수 없다.

interface PeopleInterface {
  name: string
  age: number
}

interface StudentInterface extends PeopleInterface {
  school: string
}

type PeopleType = {
  name: string
  age: number
}

type StudentType = PeopleType & {
  school: string
}

 

2️⃣ computed property name

type은 가능하지만, interface는 불가능하다.

참고) computed property name이란?
computed property name은 표현식(expression)을 이용해 객체의 key 값을 정의하는 문법이다.

type names = 'firstName' | 'lastName';

type NameTypes = {
  [key in names]: string;
}

const yk: NameTypes = { firstName: 'yuki', lastName: 'kim' };

interface NameInterface {
  [key in names]: string; // error
}

 

3️⃣ 성능을 위해서는 interface를 사용하는 것이 좋다?

여러 type 혹은 interface를 확장할 때 생각해 보자. interface는 속성 간 충돌을 해결하기 위해 단순한 객체 타입을 만든다. 왜냐하면 interface는 객체의 타입을 만들기 위한 것이고, 어차피 객체만 오기 때문에 단순히 합치기만 하면 되기 때문이다. 그러나 type의 경우, 재귀적으로 순회하면서 속성을 머지하는데, 이 경우 일부 never가 나오면서 제대로 머지가 안될 수 있다. interface와는 다르게 type은 원시 타입이 올 수도 있으므로, 충돌이 나서 제대로 머지가 안 되는 경우에는 never가 떨어진다. 아래 예시를 살펴보자.

 

interface들은 합성할 경우 이는 캐시가 되지만, 타입의 경우에는 그렇지 못하다. 타입 합성의 경우, 합성에 자체에 대한 유효성을 판단하기 전에, 모든 구성요소에 대한 타입을 체크하므로 컴파일 시에 상대적으로 성능이 좋지 않다.

type t1 = {
  a: number
}

type t2 = t1 & {
  b: string
}

const typeSample: t2 = { a: 1, b: 2 } // error
// before(3.x): Type 'number' is not assignable to type 'string'.
// after(4.x): Type 'number' is not assignable to type 'string'.(2322) input.tsx(14, 5): The expected type comes from property 'b' which is declared here on type 't2'

 

✅ 결론

무엇이 되었든 간에, 프로젝트 전반에서 type을 쓸지, interface를 쓸지 통일은 필요하다. 그러나 객체, 그리고 타입간의 합성 등을 고려해 보았을 때 interface를 쓰는 것이 더 나을 것 같다. TypeScript 팀에서는 interface의 사용을 권장하고 있다. 확장이 용이하다는 이유에서 인데, 사실상 type과 interface가 큰 성능의 차이를 보이는 것은 아니라고 한다.