Typescript type vs interface

• 타입과 인터페이스의 차이를 아나요?
• 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?

type과 interface는 객체의 타입의 이름을 지정하는 것입니다.

둘의 기능은 거의 비슷하지만 몇 가지 차이점이 있습니다.

 

상속 받는 법

interface는 extends를 type에서는 &를 이용해 상속을 통한 확장을 진행합니다.

interface interface1 {
  a: string;
}

interface interface2 extends interface1 {
  b: string;
}

const interfaceConst: interface2 = {
  a: 'a',
  b: 'b'
}

type type1 = {
  a: string;
}

type type2 = type1 & {
  b: string;
};

const typeConst: type2 = {
  a: 'a',
  b: 'b',
}

 

선언적 확장 / 자동 확장

interface는 같은 이름의 객체를 다시한번 선언하면 자동으로 확장이 됩니다.

하지만 type은 불가능 합니다.

따라서 외부에 공개되어야 하는 library 같은 경우에는 타입객체의 확장성을 위해 interface를 사용하는 것을 추천한다고 합니다.

 

아래 사진은 interface에서는 문제가 없는 모습을 캡처한 이미지 입니다.

 

computed value 사용

아래와 같이 사용할 수 없습니다.

 

튜플이나 단순한 원시값의 타입 선언의 경우에는 type을 사용(interface는 객체의 타입 정의에 사용 가능)

아래의 예제에서 유의해야 하는 점은 

intersection type과 union type입니다.

intersectin type은 두개의 객체에 포함된 모든 속성을 만족해야 합니다.

union type은 두개의 객체중 하나의 속성만 만족하면 됩니다!

type stringA = string;
type arrayA = Array<string>;
type num = 1 | 2 | 3 | 4 | 5;
type intersection = {a: string, b: string} & { a: string, c: string }
type union = { a: string } | { b: string };

const testIntersection : intersection = {
  a: 'a',
  b: 'b',
  c: 'c'
}

const testUnion: union = {
  a: 'a'
}

 

IDE 에서 출력해주는 내용

vscode에서는 타입을 정의하는 type이나 interface에 커서를 가져다 대면 정보를 제공해 줍니다. 

하지만 이때 type과 interface에서 제공해주는 정보가 다릅니다.

type에서는 타입객체의 내부 정보까지 제공해줍니다,

interface에서는 내부 정보는 제공해주지 않습니다.

interface 출력 내용

type 출력 내용

---

결론 

공식문서에서는 뭘 사용할지 모를때는 interface를 사용하고 type의 특성이 필요할때만 type을 사용하라고 하고 있습니다.

 

튜플이나 단순한 원시값의 타입 선언의 경우에는 type을 사용하여야 합니다.

type의 특성중 하나는 Utility 타입이 될수 있을것 같습니다!

2022.03.02 - [Frontend/Typescript] - Typescript 유틸리티 타입 [Utility Types]

 

하지만 정답은 없고 팀의 컨벤션에 따라가는 것이 좋지 않을까 싶습니다.

 

 

 

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

Documentation - Everyday Types

https://bny9164.tistory.com/m/48