[TypeScript] interface와 Type은 뭐가 다를까??

타입스크립트를 쓰는 당신. interface와 type에 차이점에 대해서 알고 있습니까?!?

 

저는 프로젝트를 경험하면서 솔직하게 interface라는 개념만 주구장창 사용을 했습니다 ..

근데 다른 개발자님들이 프로젝트를 개발하시는 걸 보면 또 type을 사용하는 걸 보니까 저도 조금

뭐가 다른지 궁금해져서 이번 블로그에서는 interface와 type의 차이에 대해서 조사를 해보려고 합니다.

type vs interface

 

확장하는 법

 

먼저 다른 점은 서로 확장하는 방법이 다릅니다. interface일 경우에는 extends를 사용하며 type 같은 경우

& 연산자를 사용하여서 확장을 할 수 있습니다.

interface Taerang {
  name: string;
  age: number;
}

interface Taerang extends Karina { // 확장(상속)
  pretty: string;
}

위와 같은 코드는 interface를 사용하여 확장을 하는 코드입니다. 태랑(taerang)이라고 하는 interface를

생성하고 아래에 카리나(Karina) 이름 안에 pretty를 확장시켜 주는 코드입니다.

 

그러면 type은 어떻게 사용할까요?

type Taerang = {
  name: string
  age: number
}

type Legend = Taerang & {
  school: string
}

 

태랑(taerang)이라는 type을 선언을 한 후 Legend라는 새로운 type에 Taerang이라는 type을 확장하는

코드라고 볼 수 있습니다!! interface는 extend, type은 &이라고 이제 기억하고 있으면 됩니다!!

 

선언적인 확장

다음으로 선언적 확장인데 사실 interface에서 사용하는 주 기능들은 모두 type에서 사용이 가능하다.

하지만 왜 interface가 존재를 하냐!!.. 바로 interface에서는 똑같은 이름으로 선언적 확장이 가능하고,

type 같은 경우에는 똑같은 이름으로 선언적 확장이 불가능하기 때문이다.

 

interface Taerang {
  name: string;
  age: number;
}

interface Taerang { //같은 이름으로 선언적 확장!!
  birth: string;
}

 

이제 좀 이해가 되시나요?? 이렇게 하면 Taerang interface안에는 name, age, birth 3개가 있는 것이죠.

➡️ interface를 선언하면 자동으로 확장이 됩니다. 

 

그러면 type은 어떨까?

type Taerang = {
  name: string;
  age: number;
}

type Taerang = { //Error
  birth: string;
}

type을 보면 알겠지만, 같은 이름으로 선언을 할 경우에는 Error가 발생하니까 반드시 주의하기!!

 

자료형

interface는 객체에서만 사용이 가능한 사실 알고 계시나요?! 원시 자료형은 사용 안 됩니다. ❌

예를 들면) interface Taerang extends string | number .. 이런 내용이요!!

 

하지만 type 같은 경우에는 객체 타입을 정의에다가 원시값, 튜플, 유니온을 선언할 때는 type이 더 좋습니다!!

type A = string; // primitive
type B = number;
type C = [string, number, boolean]; // tuple
type D = string | number; // union

이런 식으로요!! 무슨 느낌인지 알겠죠~??

 

Computed Value의 사용은 Type만 된다??

computed value라는 개념은 type만 적용이 되고 interface는 적용이 안 됩니다. 그러면 예시로 볼까요?

 

type names = 'OneName' | 'TwoName'

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

const bye: NameTypes = { OneName: 'hi', TwoName: 'bye' }

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

type은 되지만 interface는 안 된다 .. 이 정도만 알고 있어도 될 것 같네요 😄

 

그러면 interface와 type 중에서 그럼 뭘 써야 할까?

 

일반적인 객체에 대한 선언만 필요한 경우에는 interface를 사용하면 좋을 것 같고 그 외의 상황인

원시적인 값이나 유니온, 튜플 type이 필요할 경우에는 type을 쓰는 것이 좋을 것 같다. 또 확장을

하고 싶은 type을 설정하면 interface 아닐 경우에는 type을 쓰면 될 것 같다.

 

 

느낀 점

사실 지금까지 프로젝트를 하면서 interface만 주구장창 사용을 해왔는데 type에 대해서 공부를 하니까

어느 상황에서 type을 써야 할지 알게 된 것 같고 꼭 interface가 좋은 것은 아닌 것을 알게 되었다.

type만 되는 원시값, 유니온, 튜플 type들에 대해서 조금 더 공부를 해봐야겠다.

 

 

오늘도 즐거운 개발 하세요!!~🌱