type VS interface 꼭 써야하는 상황 정리!

제이밍·2022년 10월 22일

이력서의 사용 기술스택에 Typescript를 작성했고,
면접관이 Type, Interface 유형의 차이점에 대해서 묻는다면, 어떻게 대답해야할까?

type & interface

두 유형 모두 객체의 값 또는 함수를 설명하는 데 사용할 수 있습니다.

// type
type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

// interface
interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

용법은 다르지만 두 유형 모두 확장 가능합니다.

// & 을 사용해 타입을 확장 할 수 있습니다.
type Point1D = {
  x: number;
};

type Point2D = Point1D & {
  y: number;
}

// interface
// extends 를 사용해 타입을 확장 할 수 있습니다.
interface Point1D {
  x: number;
}

interface Point1D extends Point1D {
  y: number;
}

type VS interface 무조건 이것만 사용해야 하는 경우?

`type` 만 써야하는 경우

primitive type 에는 type만 사용 가능 합니다.

type MyNumber = number; // primitive type

union type 에는 type만 사용 가능 합니다.

type StringOrNumber = string | number; // union type

tuple type 에는 type만 사용 가능 합니다.

type Point = [number, number]; // tuple type

`interface` 만 써야하는 경우

같은 이름의 타입 을 선언하는 경우는 무조건 interface를 사용하세요!

타입의 이름이 중복된다면 Interface 자동으로 병합됩니다.
하지만 Type을 사용한 경우는 오류메세지 발생 🚨

이러한 이유로 특히 오픈소스 라이브러리를 개발한다면 사용성을 위해 Interface를 사용하는 것이 더 나은 보안을 제공 할 수 있을 것입니다!

예를 들어 webext-bridge 라이브러리는 인터페이스를 사용하여 사용자가 자유롭게 인터페이스를 확장하여 사용 가능합니다!

import { ProtocolWithReturn } from 'webext-bridge'

declare module 'webext-bridge' {
  export interface ProtocolMap {
    foo: { title: string }
    bar: ProtocolWithReturn<CustomDataType, CustomReturnType>
  }
}