[TypeScript] 타입과 인터페이스의 차이

타입과 인터페이스는 대부분 기능이 비슷하지만, 가장 구분되는 점은 타입은 만들어지고 나면 새로운 프로퍼티를 추가할 수 없지만, 인터페이스는 항상 가능하다는 것이다.

인터페이스 확장 with extends

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear()
bear.name
bear.honey

타입 확장 with intersection

type Animal = {
  name: string
}

type Bear = Animal & { honey: Boolean }

const bear = getBear()
bear.name
bear.honey

이렇듯 확장해서 새로운 타입 또는 인터페이스를 정의하는 것은 둘다 가능하다.

이미 존재하는 인터페이스에 새로운 필드 추가 - 가능

interface Window {
  title: string
}

interface Window {
  ts: TypesScirptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

이미 존재하는 타입에 새로운 프로퍼티 추가 - 불가능

type Window = {
  title: string
}

type Window = {
     ts: TypeScriptAPI 
}

// Error: Duplicate identifier 'Window' 

Ref

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces