[TS] type VS interface 차이점

타입스크립트에서 타입을 선언할 때 type 키워드와 interface 키워드를 사용할 수 있다.

이 두가지 키워드의 공통점으로는 둘 다 객체의 모양을 특정하여 타입스크립트에게 

알려주기 위해 사용한다는 것이다.

 

일반적으로

type은 자료형을 만들 때 사용하고

interface는 객체의 형태를 작성할 때 사용하는 것으로 보는 것이 바람직하다.

type

객체의 타입을 string, boolean 등과 같은 concrete 타입이 아닌 특정 값으로 한정지을 때 아래와 같이 사용할 수 있다.

type Color = 'red' | 'blue' | 'green'

 

type 키워드의 일반적인 사용

type Player = {
  nickname: string,
  healthBar: number
}
const Lee: Player {
  nickname: 'LEE',
  healthBar: 100
}

Player 타입은 string 형태의 nickname이라는 key, number 형태의 healthBar라는 key 두 개를 갖는 타입이다.

---

interface

객체의 모양을 타입스크립트에게 설명해주기 위해서만 사용된다.

interface 키워드의 일반적인 사용

interface Player {
  nickname: string,
  healthBar: number
}
const Lee: Player = {
  nickname: 'Lee',
  healthBar: 100
}

---

type VS interface 차이점

두 가지 방법은 타입에 대해 확장할 때 다르게 표현된다.

 

type 확장

type User = {
  name: string
}
type Player = User & {
  age: number
}

 

interface 확장

interface User {
  name: string
}
interface Player extends User {
  age: number
}

위 두 방법 모두 결과적으로 Player 타입은 name, age 키를 갖는다.

---

property 쌓기 (interface만 가능!)

interface 키워드가 가지는 장점으로는 동일한 이름의 interface를 작성하여 property를 누적해서 사용할 수 있다.

interface Person {
  name: string
}
interface Person {
  age: number
}
interface Person {
  height: number
}

const Lee: Person = {
  name: 'Lee',
  age: 30,
  height: 170
}

 

type은 에러 발생

---

참고:https://velog.io/@mocci/type-vs-interface-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

type vs interface 타입스크립트