[TS] type과 interface

MiMi·2022년 5월 23일
0

📘TypeScript

목록 보기
6/6
post-thumbnail
post-custom-banner

기본적인 사용 방법

interface IStudent {
  id: number;
  name: string;
}
type TStudent = {
  id: number;
  name: string;
};
const interfaceStudent: IStudent = {
  id: 0,
  name: 'name',
};
const typeStudent: TStudent = {
  id: 0,
  name: 'name',
};

차이점

1. 타입을 확장하는 방법

interface는 extends, type은 &연산자를 사용한다.

interface IStudent2 extends IStudent {
  age: number;
}
type TStudent2 = TStudent & {
  age: number;
};

interface는 동일한 이름으로 다시 interface를 정의해 확장하는 것이 가능하지만 type은 그렇지 않다.

interface IStudent {
id: number;
name: string;
}
interface IStudent {
age: number;
}

2. interface는 객체에만 사용이 가능

interface AnimalInterface {
  name: string
}

type AnimalType = {
  name: string
}

type AnimalOnlyString = string
type AnimalTypeNumber = number

interface X extends string {} // 불가능

type VS interface

interface의 경우는 속성간 충돌을 해결하기 위해 단순한 객체 타입을 만든다. 오로지 객체만 오기 때문에 타입을 merge하면 잘 된다. 하지만 type의 경우는 재귀적으로 순회하면서 속성을 merge하는데, 이 경우 일부 never가 나오면서 제대로 안될 수 있다. type은 원시 타입이 올수도 있기 때문에 충돌이 나게 된다.

type type2 = { a: 1 } & { b: 2 } // 잘 머지됨
type type3 = { a: 1; b: 2 } & { b: 3 } // resolved to `never`

const t2: type2 = { a: 1, b: 2 } // good
const t3: type3 = { a: 1, b: 3 } // Type 'number' is not assignable to type 'never'.(2322)
const t3: type3 = { a: 1, b: 2 } // Type 'number' is not assignable to type 'never'.(2322)

또한, interface들을 합성할 경우에는 캐시가 되지만 type은 그렇지 않다.
type 합성의 경우, 모든 구성요소에 대한 type을 체크하므로 컴파일 시에 상대적으로 성능이 좋지않다고 한다.
프로젝트를 설계하기 전에 type을 쓸지 interface를 쓸지 통일을 하면 좋을 것이다.

참고문헌

profile
이제 막 입문한 코린이 -> 이전중 https://mimi98.tistory.com/
post-custom-banner

0개의 댓글