[TypeScript] 타입스크립트 type과 interface의 공통점과 차이점

🛫 타입스크립트 type과 interface

타입스크립트에서 type과 interface는 모두 타입을 정의하는 데 사용되는 기능입니다.

🪐 type

type은 새로운 타입을 정의할 때 사용됩니다. type은 기존 타입을 확장하거나 별칭을 만들 수 있으며, 유니온 타입, 인터섹션 타입, 제너릭 등의 고급 타입 기능을 활용할 수 있습니다.

// 유니온 타입 예시
type MyType = string | number;
 
const myVariable: MyType = "Hello";
const myNumber: MyType = 42;
 
// 인터섹션 타입 예시
type FirstType = { foo: number };
type SecondType = { bar: string };
 
type CombinedType = FirstType & SecondType;
 
const combinedObject: CombinedType = {
    foo: 42,
    bar: "Hello",
}
 
// 제네릭 타입 예시
type Box<T> = {
    value: T;
};
 
const numberBox: Box<number> = {
    value: 42,
};
 
const stringBox: Box<string> = {
    value: "Hello",
};

🪐 interface

interface는 객체의 구조를 정의하는 데 사용됩니다. interface는 주로 클래스 또는 객체의 형태와 멤버(속성과 메서드)를 선언하는 데 사용됩니다. interface를 구현한 클래스나 객체는 해당 interface의 형태와 멤버를 따라야 합니다. interface는 확장(상속)이 가능하며, 다른 interface를 기반으로 새로운 interface를 정의할 수도 있습니다.

// 객체의 형태를 정의하는 인터페이스
interface Person {
  name: string;
  age: number;
}
 
const person: Person = {
  name: "John",
  age: 25,
};
 
// 인터페이스 간 상속
interface Shape {
  color: string;
}
 
interface Circle extends Shape {
  radius: number;
}
 
const myCircle: Circle = {
  color: "red",
  radius: 5,
};

type과 interface, 차이점을 알아보자

1) 상속 받는 법

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' };
 

상속을 받음으로써 상속받은 내용과 새로 추가한 내용이 합쳐진 형태의 타입이 선언되게 됩니다.

2) 선언적 확장 / 자동 확장

interface는 같은 이름의 객체를 다시한번 선언하면 자동으로 확장이 됩니다. 즉, 다시말해 동일한 인터페이스의 이름을 한번 더 사용하여 기존의 내용 + 다시한번 선언한 내용이 결합되어 확장되게 됩니다.

하지만 type은 같은 이름의 type을 선언하는 것이 불가능합니다.

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

문제 없이 선언 및 사용 가능

3) Mapped 타입(computed value) 사용

Mapped 타입은 타입스크립트에서 기존 타입을 변환하여 새로운 타입을 생성하는 방법 중 하나입니다. 정확하게는 기존 타입의 속성들을 반복하여 새로운 타입을 생성할 수 있는 것이며, 이때 반복하는 과정에서 속성 이름이나 속성의 타입을 수정하거나 선택적으로도 만들 수 있습니다.

 

Mapped 타입은 keyof와 in 키워드를 사용하여 정의됩니다. 아래는 Mapped 타입의 예시입니다.

type NewType = {
    [k in keyof OldType]: string;
}

여기서 OldType은 기존 타입이고, NewType은 새로운 타입입니다. [k in keyof OldType]은 쉽게 유추할 수 있듯이 OldType의 필드를 하나씩 돌면서 그때의 key값을 가져와 사용한다는 의미입니다. 

 

그런데 이러한 Mapped 타입은 type에서만 사용이 가능하고 interface에서는 사용이 불가능합니다.

4) IDE에서 출력해주는 내용

vscode에서는 타입을 정의하는 type이나 interface에 커서를 가져다 대면 정보를 제공합니다. 하지만 이때 type과 interface에서 제공해주는 정보가 다릅니다. type은 타입 객체의 내부 정보까지 제공해줍니다. 하지만 interface에서는 내부 정보는 제공해주지 않습니다.

type의 경우

interface의 경우

🛬 결론

이펙티브 타입스크립트 책에서는 프로젝트 코드베이스에 맞게 interface를 사용하고 있다면 interface를, type을 사용하고 있다면 type을 사용하라고 하고 있으며, 어떤 API에 대한 타입 선언을 작성해야 한다면 인터페이스를 통해 새로운 필드를 병합할 수 있어 유용하기 때문에 향후 보강의 가능성을 생각해보고 결정을 해야 한다고 하고 있습니다.