Typescript에서 type과 interface의 특징과 차이점

타입스크립트(TypeScript)에서 타입을 정의할 때, 사용하는 두 가지 개념이 있습니다. type과 interface입니다. 이 두 구조는 타입스크립트에서 데이터의 형태를 정의하는 데 사용되지만, 그 사용법과 목적에서 약간의 차이가 있습니다.

 

type과 interface의 기본 사용법

차이점을 살펴보기 전에 두 개념의 사용법에 대해 먼저 살펴봅시다.

 

타입(type)

type은 interface보다 보다 유연하게 타입을 정의할 수 있습니다. 객체 형태뿐만 아니라, 유니온(Union), 인터섹션(Intersection), 튜플(Tuple) 등 다양한 타입의 조합을 만들어낼 수 있습니다.

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

type ID = string | number;

const point: Point = { x: 100, y: 200 };
const myID: ID = "1234";

 

인터페이스(interface)

interface는 객체의 형태를 정의하기 위해 사용됩니다. 주로 Java와 같이 객체 지향 프로그래밍의 구조를 타입스크립트에서도 활용하고자 할 때 사용합니다. 예를 들어, User 객체를 정의할 때 interface를 사용할 수 있습니다.

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "홍길동",
  age: 32
};

 

type과 interface의 차이점

interface는 확장(extends)이 가능합니다. 다른 interface를 상속받아 새로운 interface를 생성할 수 있습니다.

// interface를 사용하여 extends 할 때
interface Bird {
  wings: 2;
}

interface Peacock extends Bird {
  colourful: true;
  flies: false;
}

interface Chicken extends Bird {
  colourful: false;
  flies: false;
}

 

 

type도 interface의 상속을 받을때, 인터섹션(&)과 유니온(|)을 사용할 수 있습니다.

type Bird = {
  wings: 2;
};

// type과 유니온(union)을 이용할 때
type Peacock = Bird | {
  colourful: true;
  flies: false;
}

// type과 인터섹션(intersection)을 이용할 때
type Chicken = Bird & {
  colourful: false;
  flies: false;
}

const peacock: Peacock = {
  wings: 2,
  flies: false
}

const chicken: Chicken = {
  wings: 2,
  colourful: false,
  flies: false,
}

console.log(peacock, chicken);

 

유니온과 인터섹션 타입의 차이
유니온타입은 여러 개의 타입 중 일부 또는 전체를 취할 수 있고, 인터섹션 타입의 경우는 여러 타입을 모두 포함하는 새로운 타입을 생성하여 각 타입의 속성을 모두 포함합니다.

 

사용하는 사람마다 다를 수 있지만, type의 확장 표현은 interface에 비해 상대적으로 복잡할 수 있습니다. 복잡한 대신에 type은 유니온, 인터섹션, 튜플 등을 사용하여 interface보다 더 복잡하고 다양한 타입을 표현할 수 있습니다.

 

결론

type과 interface는 각각의 장단점이 있으며 상황에 따라 적절히 선택하여 사용하면 됩니다. "무조건 type을 써야한다. interface를 써야한다." 와 같이 한 가지만 고집할 필요는 없습니다.

 

interface는 명확하게 객체를 정의하고 확장할 때 유용하며, type은 복잡한 타입 조합이 필요할 때 사용하기 좋습니다.

 

관련 글

왜 타입스크립트를 사용하는가? (javascript vs typescript)