TypeScript - type과 interface의 차이

1. 공통점

기본적인 사용 방법에는 큰 차이가 없다. 다만, interface는 객체의 타입을 지정하기 위해 고안된 방법이다.

type PersonType = { name: string };

const person: PersonType = {name: 'Jenny'}

interface PersonType {
  name: string;
}

const person: PersonType = {name: 'Jenny'}

2. 차이점 - 확장 방법의 차이

1) type - '&' 연산자 이용

type NewPersonType = PersonType & { age: number };

const person: NewPersonType = {name: 'Jenny', age: 28}

2) interface: 'extends' 키워드 이용

interface NewPersonType extends PersonType {
  age: number;
}

const person: NewPersonType = {name: 'Jenny', age: 28}

3) 선언적 확장은 interface에서만 가능하다.

interface NewPersonType { gender: string }

const person: NewPersonType = {name: 'Jenny', age: 28, gender: 'female'} 

선언적 확장을 통해 새로운 interface를 만들지 않고, 이미 존재하고 있는 NewPersonType의 속성을 확장해나갈 수 있다.

4) union 타입의 확장은 type에서만 가능하다

type PersonType1 = { name: string };
type PersonType2 = { age: number };
type NewPersonType = (PersonType1 | PersonType2) & { gender: string };

interface PersonType1 {name: string};
interface PersonType2 { age: number };
interface NewPersonType extends (PersonType1 | PersonType2) & { gender: string }; // 에러남

3. type과 interface 둘 중 어떤 걸 써야할까?🤔

interface를 사용하는 것이 프로그램의 성능 면에서 더 좋다고는 하는데 아직 잘 모르겠다. type과 interface의 속성에 맞게 각각의 상황에서 사용하면 될 것 같다.

나의 경우에는 type보다는 interface를 대부분 사용했는데 애초에 타입을 변수에 저장해서 사용하는 경우가 타입이 복잡하고 다양한 경우이기 때문이다.

객체는 속성이 얼마든지 늘어날 수 있고, 한 속성이 여러 개의 타입을 가질 수 있기 때문에 객체의 타입을 정의할 때, 특히 component를 사용하며 props의 타입을 정의할 때 interface를 많이 사용했던 것 같다.

다만, 확장하는 방법에 차이가 있으므로 팀단위로 작업을 할 때 interface를 쓸 것인지 type을 쓸 것인지 정하는 과정이 필요해 보인다.