[typescript] Type vs Interface

타입스크립트를 사용하면서 type과 interface 모두 공통점이 많은데 왜 구분되어 있을까라는 생각이 문뜩 들었다.
이번에 차이점을 알아보면서 어떤 경우에 type 또는 interface를 사용하는 것이 좋은지 알아보자.

Type과 Interface 비교

1. 타입 할당

type PersonType = {
  name: string;
  gender: 'female' | 'male';
};
interface PersonInterface {
  name: string;
  gender: 'female' | 'male';
}

const person1: PersonType = {
  name: 'minji',
  gender: 'female',
};
const person2: PersonInterface = {
  name: 'junseok;
  gender: 'male';
};

2. 확장

Interface

extends 키워드를 통해 기존 인터페이스를 확장할 수 있다.

interface AgePersonInterface extends PersonInterface {
  age: number;
}
const person3: const jieun: AgePersonInterface = {
  name: 'jisu',
  gender:'female',
  age: 20,
}

Type

&(intersection operator)를 통해 기존 타입을 확장할 수 있다.

type AgePersonType = PersonType & { age: number };
const person4: AgePersonType = {
  name: 'jisu',
  gender:'female',
  age: 20,
}

3. 선언적 확장

Interface와 Type 모두 확장이 가능하지만 선언적 확장은 Interface만 가능하다.

Interface

인터페이스는 타입과 다르게 동일한 인터페이스 이름으로 선언 시,
자동으로 확장된다.

👉 여러 번 정의한 인터페이스를 합칠 수 있다.

interface PersonInterface {
  name: string;
  gender: 'female' | 'male';
}
interface PersonInterface {
  age:number;
}

const person5: PersonInterface = {
  name: 'jisu',
  gender:'female',
  age: 20,
}

Type

타입은 선언적 확장이 불가능하다.

type PersonType = {
  name: string;
  gender: 'female' | 'male';
};

type Person = { // ❗️Error: Duplicate identifier 'PersonType'.
  age: number;
}

4. computed value 사용

computed value는 표현식을 통해 객체의 key 값을 정의한다.

Interface

인터페이스는 사용 불가능하다.

type Alphabet = 'a' | 'b' | 'z';

interface AlphabetInterface {
  [key in Alphabet]: string; // ❗️Error: A mapped type may not declare properties or methods.
}

Type

타입은 사용 가능하다.

type Alphabet = 'a' | 'b' | 'z';
type AlphabetType = {
  [key in Alphabet]: string;
}

🤔❓ 그럼 언제 type 또는 interface를 사용하는 것이 좋을까?

우아한 기술 블로그를 참고하니 type의 경우, IDE에서 미리보기 지원과 원치 않는 선언 병합을 막아주기 때문에 type을 사용하는 것을 선호한다고 한다.

💡 정답은 없지만 팀의 코드 컨벤션에 따라 사용하는 것이 적합하다.

🔗참고 사이트
Typescript type vs interface
computed value 참고
우아한 기술 블로그