[typescript] interface와 type의 비교

9216 단어 typescripttypescript

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

좋은 웹페이지 즐겨찾기