[TypeScript] interface와 type의 차이점

프로젝트를 하던 중 TypeScript의 type과 interface의 차이점이 궁금하여 알아보았다

 

interface는 type과 마찬가지로 객체의 타입의 이름을 지정하는 또 다른 방법이다. 

 

확장하는 방법의 차이

interface Person {
	name : string,
    age : number
}

interface Student extends Person{
	school : string
}

• extends 방식

type Person = {
	name : string,
	age : number
}

type Student = Person & {
	school : string
}

• & 활용

 

선언적 확장

 

 type은 새로운 속성을 추가하기 위해서 다시 같은 이름으로 선언할 수 없지만, interface는 항상 선언적 확장이 가능하다.

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

// 같은 interface 명으로 Window를 다시 만든다면, 자동으로 확장이 된다.

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

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

// Error: Duplicate identifier 'Window'.
// 타입은 안된다.

 

interface는 객체에만 사용이 가능하다

 

interface는 객체 타입에만 가능하고 type은 모든(any) 타입에 가능하다.

interface FooInterface {
  value: string
}

type FooType = {
  value: string
}

type FooOnlyString = string
type FooTypeNumber = number

// 불가능
interface X extends string {}

 

computed value의 사용

 

 type은 가능하지만 interface는 불가능

type names = 'firstName' | 'lastName'

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

const yc: NameTypes = { firstName: 'hi', lastName: 'yc' }

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

 

 

마치며

 프로젝트 하다가 무엇을 사용하면 좋을지 모르겠어서 학습을 하게 되었는데, 둘 중에 하나만 정해서 사용하는 것보다 확장 여부에 따라서 선택적으로 사용하면 좋을 것 같다고 생각했다. 공식문서에서는 인터페이스의 사용을 권장하지만 직접 사용해보면서 더 알아봐야겠다!

 

출처

https://tecoble.techcourse.co.kr/post/2022-11-07-typeAlias-interface/ 

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

https://yceffort.kr/2021/03/typescript-interface-vs-type