TypeScript에서 type
과 interface
는 비슷한 역할을 하는 것 같은데, 어떤 경우에는 type
을 사용하는 게 좋고 어떤 경우에는 interface
를 사용하는 게 좋은지 궁금해서 알아보았다.
extends
키워드를 이용해서 확장할 수 있다.
interface Person {
name: string;
age: number;
}
interface Student extends Person { // 확장(상속)
school: string;
}
const jieun: Student = {
name: 'jieun',
age: 27,
school: 'HY'
}
&
기호를 이용해서 확장할 수 있다.
type Person = {
name: string,
age: number
}
type Student = Person & { // 확장(상속)
school: string
}
const jieun: Student = {
name: 'jieun',
age: 27,
school: 'HY'
}
선언적 확장(Declaration Merging)이 가능하다.
(같은 이름의 interface를 선언하면, 자동으로 확장된다.)
interface Person {
name: string;
age: number;
}
interface Person { // 선언적 확장
gender: string;
}
const jieun: Person = {
name: 'jieun',
age: 27,
gender: 'female'
}
선언적 확장이 불가능하다.
type Person = {
name: string;
age: number;
}
type Person = { // ❗️Error: Duplicate identifier 'Person'.
gender: string;
}
➡️ 따라서 타입 객체의 확장성을 위해서는
interface
를 사용하는 것이 더 좋다.
객체(Object)의 타입을 설정할 때 사용할 수 있으며, 원시 자료형에는 사용할 수 없다.
interface Person {
name: string;
age: number;
gender: string;
}
interface name extends string { // ❌ 불가능
...
}
객체 타입을 정의할 때도 사용할 수 있지만, 객체 타입을 정의할 때는 interface
를 사용하는게 좋고,
단순한 원시값(Primitive Type)이나 튜플(Tuple), 유니언(Union) 타입을 선언할 때 type
을 사용하는 것이 좋다.
type Name = string; // primitive
type Age = number;
type Person = [string, number, boolean]; // tuple
type NumberString = string | number; // union
type Person = { // 객체는 interface를 사용하도록 하자.
name: string,
age: number,
gender: string
}
computed value 사용이 불가능하다.
type Subjects = 'math' | 'science' | 'sociology';
interface Grades {
[key in Subjects]: string; // ❗️Error: A mapped type may not declare properties or methods.
}
computed value 사용이 가능하다.
type Subjects = 'Math' | 'Science' | 'Sociology';
type Grades = {
[key in Subjects]: string;
}
정리
type
은 모든 타입을 선언할 때 사용할 수 있고,interface
는 객체에 대한 타입을 선언할 때만 사용할 수 있다.
또한 확장 불가능한 타입을 선언하고 싶다면type
을 사용하면 되고, 확장 가능한 타입을 선언하고 싶다면interface
를 사용하면 된다.
interface vs type alias
두가지의 차이점 정리가 완전 깔끔해서 쉽게 이해하고 갑니다!