[TypeScript] Interface vs Type

Interface와 Type

TypeScript에서 Interface와 Type는 모두 타입 정의에 사용되며, 코드의 가독성을 높이고 타입을 명확히 지정할 수 있도록 도와준다.

두 개념은 유사한 역할을 하지만, 미묘한 차이와 사용 목적이 다르다.

Interface와 Type 모두 객체, 함수, 배열 등의 타입을 정의할 수 있으며 기존 정의를 확장하거나 새로운 속성을 추가할 수 있다.

또한 둘 다 복잡한 구조를 읽기 쉽게 표현하고, 재사용성을 높여준다.

Interface

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

확장

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

interface Worker extends Person {
	company: string;
}

extends 키워드를 이용해서 확장할 수 있다.

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

interface Person { // 선언적 확장
	gender: string
}

Interface는 선언적 확장이 가능하다.
같은 이름의 Interface를 선언하면 자동으로 확장된다.

자료형

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

interface name extends string { // 불가능
	...
}

Interface는 객체(Object)의 타입을 설정할 때 사용할 수 있으며, 원시 자료형에는 사용이 불가하다.

Type

type Person =  {
  age: number;
  name: string;
}

확장

type Person =  {
  age: number;
  name: string;
}

type Worker = Person & {
	company: string
}

& 기호를 이용해 확장할 수 있다.

type Person =  {
  age: number;
  name: string;
}

type Person =  { // 불가능
	company: string
}

Type은 선언적 확장이 불가능하다.
같은 이름을 가진 Type을 선언할 수 없다.

때문에 확장성을 위해서는 Interface를 선택하는 편이 좋다고 한다.

자료형

type Name = string;
type Age = number;

Type은 원시값이나 튜플과 같은 자료형에 대한 타입도 정의할 수 있다.

computed value

type Sports = 'Football' | 'Baseball' | 'Basketball';

type SportsTypes = {
  [key in Sports]: string;
};

Type은 computed value 사용이 가능하지만, interface는 불가능하다

언제 사용해야 할까?

Interface를 사용하는 경우

• 객체의 구조를 정의하거나 클래스를 기반으로 설계할 때.
• 여러 선언을 병합해야 할 때.

Type을 사용하는 경우

• 유니언, 교차 타입, 매핑된 타입, 기본 타입의 별칭이 필요할 때.
• 복잡한 조합 타입을 정의해야 할 때.