본문 바로가기
FE/TypeScript

[TypeScript] interface와 type의 차이점

by thedev 2023. 2. 25.

 

interface와 type의 차이점

 


 

# 확장하는 방법의 차이

 

 

1. interface 확장 방법

 

interface User {
  name: string
  age: number
}

interface WebUser extends User {
  website: string
}

 

interface Student {
  name: string
  age: number
}

interface Student {
  id: number
}

 

interface는 extends를 이용하거나 혹은 그냥 선언으로도 확장이 가능하다.

 

 

2. type 확장 방법

 

type User {
  name: string
  age: number
}

type WebUser = User & {
  website: string
}

 

type은 &을 이용하여 확장할 수 있다. 그러나 선언으로는 확장할 수 없다.

 

 

# interface는 객체에만 사용 가능

 

interface ExampleInterface {
  value: string
}

type ExampleType = {
  value: string
}

type ExampleString = string
type ExampleNumber = number

 

interface는 객체에만 사용할 수 있고, type은 객체가 아니어도 사용 가능하다.

 

 

# type보다 interface를 사용하는 게 나은 이유

 

 interface는 단순한 객체 타입을 만든다. 따라서 확장을 해도 어차피 객체만 생성하기 때문에 단순히 합치기만 하면 되기 때문에 오류가 날 일이 잘 없다. 그러나 type의 경우 interface와는 다르게 원시 타입이 올수도 있으므로, 충돌이 나서 never 타입이 나오는 경우가 있다. 그러니 일반적인 경우에는 interface를 사용하는 것이 더 좋다.

 


 

참고 자료

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

'FE > TypeScript' 카테고리의 다른 글

[TypeScript] 제네릭  (0) 2023.02.01
[TypeScript] TypeScript 알아보기  (0) 2023.01.05