[TypeScript] type과 interface의 차이를 알아보자

타입스크립트에서 타입을 선언하는 방법은 type과 interface가 있습니다. 두 가지 방법은 유사하지만 일부 차이점이 있습니다.

확장 상속

interface

extends를 이용하여 확장할 수 있습니다.

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

interface Student extends Person {
  school: string;
}

const minjae: Student = {
  name: 'MJ',
  age: 27,
  location: 'Goyang'
}

type

& 기호를 이용해서 확장을 할 수 있습니다.

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

type Student = Person & { 
  school: string
}

const minjae: Student = {
  name: 'MJ',
  age: 27,
  location: 'Goyang'
}

---

선언적 확장

interface

같은 이름의 interface를 선언하면 자동으로 확장됩니다.

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

interface Person {
  location: string;
}

const minjae: Person = {
  name: 'MJ',
  age: 27,
  location: 'Goyang'
}

type

선언적 확장이 불가능합니다.

---

자료형

interface

객체(Object) 타입을 설정할 때 사용할 수 있으며, 원시 자료형에는 사용할 수 없습니다.

interface Person {
  name: string;
  age: number;
  gender: string;
}
interface name extends string { 
  // 불가능
}

type

단순한 원시값(Primitive Type)이나 튜플(Tuple), 유니언(Union) 타입을 선언할 때 type을 사용하는 것이 좋습니다.

type Name = string;
type Age = number;
type Person = [string, number, boolean];
type NumberString = string | number; 

---

Computed Value

interface

computed value 사용이 불가능합니다.

type

type languages = 'JavaScript' | 'TypeScript' | 'React';

type ProgrammingLanguages = {
  [key in languages]: string;
}

---

✅ 참고

• TypeScript_docs
• typescript에서 interface와 type의 차이점을 알아보자(hayeonn)
• type과 interface의 차이(wlwl99)
• Interface 와 Type 확장에서의 차이점 알아보기(waterbin)