타입스크립트에서 type과 interface는 언제 사용해야하지?

type과 interface의 차이점

1. interface
   
   • 객체 상속을 지원하며 캐싱의 장점이 있다.
   • 인덱스 시그니처를 암무적으로 가진다.
2. type
   • 모든 유형의 타입을 정의할 수 있고, 중복 정의 문제가 발생하지 않는다.
   • 인덱스 시그니처를 가지지 않는다.
   • 재선언 불가(const 키워드의 역할)

객체 상속을 사용할 때는 interface를 활용하자

interface를 이용하여 객체 상속

이름을 기반으로 정보를 내부 레지스트리에 캐싱할 수 있어, extends를 사용할 때는 캐싱의 장점을 활용할 수 있다.

interface WithId {
  id: string
}

interface User extends WithId {
  name: string
}

const user: User = {
  id: '0623',
  name: 'chanmin',
  wrongProperty: 123, // Error!
}

type을 이용하여 객체 상속

유니온(&)연산자를 활용하는 경우에는 이름을 기반으로 캐싱할 수 없다.

항상 연산을 수행하기 때문에 성능상 불리하다.

type WithId {
  id: string;
}

type User & WithId {
  name: string;
}

const user: User = {
  id: "0623",
  name: "chanmin",
  // Error
  // `Type '{ id: string; name: string; wrongProperty: number; }' is not assignable to type 'User'.
  // Object literal may only specify known properties, and 'wrongProperty' does not exist in type 'User'.
  wrongProperty: 123,
};

interface는 선언된 interface들을 합쳐버린다

interface 선언

• var 키워드처럼 중복 할당을 허용한다.
• 덮어쓰는 것이 아니라 같은 이름의 서로 다른 인터페이스들의 속성을 모두 병합한다.

interface User {
  name: string
}

interface User {
  id: string
}

// 1. 스코프 내에 User 인터페이스가 중복으로 선언되었음에도, 이를 오류로 판단하지 않는다.
// (* 마치 var 처럼 동작한다.)

const user: User = {
  // Error
  // "Property 'name' is missing in type '{ id: string; }' but required in type 'User'."
  id: '123',
}

type 선언

const 키워드 처럼 동작해서 타입 중복할당을 방지할 수 있다.

// Error: Duplicate identifier 'User'.
type User = {
  name: string;
}

// Error: Duplicate identifier 'User'.
type User = {
  id: string;
}

const user: User = {
  id: string;
}

인덱스 시그니처

interface

추후 확장될 수 있는 가능성이 있기 때문에 인덱스 시그니처를 활용하려면 명시적으로 정의해줘야 한다.

interface KnownAttributes {
  x: number
  y: number
}

const knownAttributes: KnownAttributes = {
  x: 1,
  y: 2,
}

type RecordType = Record<string, number>

// Error
// `Type 'KnownAttributes' is not assignable to type 'RecordType'.
// `Index signature for type 'string' is missing in type 'KnownAttributes'.`

// KnownAttributes 인터페이스에 <string, number> 외에 다른 타입이 확장될 수 있을 것으로 추론한다.
const oi: RecordType = knownAttributes

//명시적으로 정의해주는 방식
interface KnownAttributes {
  x: number
  y: number
  [index: string]: unknown
}

type

type KnownAttributes = {
  x: number
  y: number
}

const knownAttributes: KnownAttributes = {
  x: 1,
  y: 2,
}

type RecordType = Record<string, number>

const oi: RecordType = knownAttributes

type과 interface를 써야하는 상황

1. interface
   • 객체 지향적으로 코드를 짤 때, 상속하는 경우(extends, implements)
   • 다이얼로그 컴포넌트를 만들 때, 사이즈가 다른 다이얼로그끼리 같은 속성을 공유하는 기준 인터페이스를 정의하고 확장할 때 사용
2. type
   • 유니온 타입이나 교차 타입 등 type 정의에서만 쓸 수 있는 기능을 활용할 때
   • computed value(계산된 값)를 써야할 때

참고

타입스크립트에서 type 과 interface 더 알아보기

 

우아한 타입스크립트 with 리액트 | 우아한형제들 - 교보문고