[typescript] interface와 type의 비교

type과 interface는 상당히 비슷한 기능을 갖고 있다.
많은 부분에서 interchangable하다.

type은 주로 function에 사용하고, interface는 object (class 타입)에 주로 사용한다. 이것은 반드시 그래야하는것은 아니고, 단지 더 자연스러운 방식 을 선택하는 것이다.

type과 interface의 차이점

🚀 type 에서만 가능한 것들

union

type Cat = { type: 'Animal', species: 'Cat' };
type Dog = { type: 'Animal', species: 'Dog'};

type Pet = Cat | Dog;
const kitty: Pet = { type: 'Animal', species: 'Dog' }

primitives

type Id = string | number;
type date = string;

shorthand functions

type Func = (str: string) => string
type returnBool<T> = (a: T) => boolean;

const isValidNumber: returnBool<any> = (a) => Number.isInteger(a);
isValidNumber(1) // true
isValidNumber('a') // false

🚀 interface 에서만 가능한 것들

declaration merging

// 기존 Request가 있다고 가정
interface Req {
  url: string;
  params: string;
}

// 굳이 다른이름으로 extends하거나 type을 재 정의하는 것보다, 같은 이름으로 merging하는 것이 자연스러움
interface Req {
  method: string;
}

const request: Req = {
  url: '/posts/',
  params: '?id=1',
  method: 'GET',
}

familiarity (extends)

interface Point2D {
  x: number;
  y: number;
}

interface Point3D extends Point2D {
  z: number;
}

const pos: Point3D = {
  x: 1,
  y: 2,
  z: 0,
}

// type에서도 intersection(&)이라는 것으로 이용해서 extends 처럼 만들 수 있다. 하지만 이 경우는 intersection(&)보다 extends가 더 자연스럽다.
type Point2D = {
  x: number;
  y: number;
}

type Point3D = Point2D & {
  z: number;
}

const pos: Point3D = {
  x: 1,
  y: 2,
  z: 0,
}

Ref

• YouTube / TypeScript TYPES vs INTERFACES : Key Differences