type vs Interface

들어가기에 앞서 둘의 목적과 기능이 조금씩 다르므로 개념부터 알아보자

1. type 이란?

type은 말 그대로 "타입에 이름을 붙이는 것"이다.

이게 무슨 말인가 싶을텐데 코드를 예로 들자면, 

{
  name: string
  age: number
}

이 구조를 매번 쓰기 불편하기 때문에 이 타입에 이름을 붙이면, 

type User = {
     name: string
     age: number
}

이렇게 된다. 그리고 이제 이 구조를 사용할 땐

const user: User = {
  name: "sungjae",
  age: 25
}

이렇게 사용해주면 된다. 이렇게 User 라는 이름으로 쉽게 사용할 수 있다. 

따라서 핵심은 type =  어떤 타입 구조에 이름을 붙이는 것이다. 

 

 

2. interface란?

interface는 "객체의 구조"를 정의하는 것이다.

이 객체는 어떤 속성을 가지고 있고, 그 속성은 어떤 타입이어야 한다 라고 명시하는 것이다. 

이것도 코드를 예로 들자면,

interface User {
  name: string
  age: number
}

이걸 사용하려면

const user: User = {
  name: "sungjae",
  age: 25
}

 

이렇게 사용하면 된다. 여기서 interface는
이 객체는 name(string)과 age(number)를 가져야 한다" 라는 객체 구조를 정의한 것이다. 

 

 

3. 그래서 차이점이 뭔가? 

구분	type	interface
개념	타입에 이름 붙이기	객체 구조 정의
객체 타입 정의	가능	가능
유니온 타입 정의	가능	불가능
함수 타입 정의	가능	제한적
Declaration Merge	불가능	가능

 

차이점은 이러한데.. 유니온 타입 정의는 뭐고 Declaration Merge는 뭘까? 아래에 정리를 해봤다

 

4. 유니온 타입

유니온 타입은 여러 타입 중 하나가 될 수 있는 타입이다.

즉, 선택지를 여러 개 주고 한 개를 선택할 수 있다는 말이다. 

type에선 가능하고 interface에선 불가능하다. 

 

코드를 예로 들자면,

type Status = "success" | "error" | "loading"

Status는 "success" 또는 "error" 또는 "loading" 중 하나가 될 수 있다. 

이걸 사용하기 위해선

let status: Status

status = "success"
status = "error"

이렇게 사용하면 되는데, 

status = "done"

이건 허용 되지 않는다. 왜냐? 선언한 Status에 "done"이 없기 때문이다. 

 

5. Declaration Merge 

Declaration Merge는 같은 이름의 선언을 합치는 TypeScript 기능이다. 

 

코드를 예로 들자면,

interface User {
  name: string
}

interface User {
  age: number
}

코드상으로는 이렇게 2개로 나뉘지만 TypeScript는 내부적으로 아래와 같이 이해한다.

interface User {
  name: string
  age: number
}

이렇게 자동으로 같은 이름의 선언을 합치는 것이 Declaration merge이다.

하지만, type은 같은 이름을 다시 선언할 수 없기 때문에 interface에서만 가능하다. 

 

type으로 코드를 예로 들자면,

type User = {
  name: string
}

type User = {
  age: number
}

이 코드는 에러가 발생하게 된다.