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

제이밍·2022년 10월 22일
3
post-thumbnail

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

type & interface

  1. 두 유형 모두 객체의 값 또는 함수를 설명하는 데 사용할 수 있습니다.
// 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;
}
  1. 용법은 다르지만 두 유형 모두 확장 가능합니다.
// & 을 사용해 타입을 확장 할 수 있습니다.
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 만 써야하는 경우

  1. primitive type 에는 type만 사용 가능 합니다.
type MyNumber = number; // primitive type
  1. union type 에는 type만 사용 가능 합니다.
type StringOrNumber = string | number; // union type
  1. 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>
  }
}

Reference

https://medium.com/javascript-in-plain-english/no-more-confusion-about-typescripts-type-and-interface-63c39418ae35

profile
모르는것은 그때그때 기록하기

0개의 댓글