타입스크립트 interface와 type의 차이점 정리

1. 서론 

---

타입스크립트의 interface와 type은 마치 자바스크립트에서 함수 선언식과 화살표 함수처럼 느껴진다. 얕게 보면 분명 같은 목적을 가졌으므로 서로 문법만 다르다고 오해하기 쉽지만, 내부적으로는 차이점이 존재한다. interface와 type의 차이를 정리하면서 더 깊게 이해하고 넘어가면 앞으로 더 좋은 코드를 작성하는 데 도움이 될 것이라고 생각되어 이 글을 작성한다. 

 

2. 차이점

---

 

2-1. 범용성 

interface와 type의 가장 대표적인 차이는 범용성이다. type은 아무 타입과도 사용될 수 있으나, interface는 객체 타입을 정의할 때만 사용된다.   

/**
* @type -> 
* string, number, 리터럴, 객체에 모두 사용할 수 있음 
*/ 
type Name = string;
type Age = number;
type Occupation = 'Frontend Developer' | 'Backend Developer';
type Human = { 
    name: Name;
    age: Age;
    job: Occupation;
};

/**
* @interface -> 
* 객체 타입, 즉 객체의 형태를 정의할 때만 사용할 수 있음 
*/ 
interface Human2 {
    name: string;
    age: number;
    job: 'Frontend Developer' | 'Backend Developer';
}

interface name = string; // Error!

 

2-2. interface와 type의 정의 범위 

interface와 type은 정의하는 범위가 다르다. type으로 새로운 타입을 지정하는 경우, 새로운 타입 자체가 정의되는 것이 아니라 단순히 해당 타입을 부를 '이름'을 정의하는 것이다. 하지만 interface를 사용하는 경우 새로운 인터페이스 자체가 정의된다.

 

아래 예제를 TypeScript Playground에 가져간 후 각 Person1과 Person2에 마우스를 올려보면 주석 처리된 내용이 나타난다. 즉,  type을 사용한 Person1의 경우 새로운 Person1 이라는 새로운 타입이 정의된 것이 아니라, Person1이라는 식별자로 name과 age 프로퍼티를 가진 객체 타입을 참조할 수 있는 권한이 생긴 것이고, Person2의 경우는 Person2라는 새로운 인터페이스 자체가 정의된 것이다. 

type Person1 = {
    name: string;
    age: number;
}; // -> type Person1 = { name: string; age: number; }

interface Person2 {
    name: string;
    age: number;
} // -> interface Person2

 

 

2-3. 확장 방식 

인터페이스는 extends 키워드를 사용해서 확장할 수 있다. 아래 예제에서 Developer 인터페이스가 Person 인터페이스를 extends 하므로, name과 age 속성을 따로 포함하지 않아도 Develop 인터페이스에 포함된다. 

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

interface Developer extends Person {
    job: 'Frontend Developer' | 'Backend Developer'
}

const James: Developer = {
    name: 'James Sohn',
    age: 23,
    job: 'Frontend Developer'
}

또한 인터페이스는 선언적 확장이 가능하다. 아래 예제에서 Person이라는 인터페이스를 중복 선언한 것처럼 보이지만, 타입스크립트는 동명 인터페이스들을 병합해준다. 즉, Person이라는 인터페이스는 James라는 변수의 타입으로 지정되기 전, name, age, job 속성을 모두 포함하고 있다. 

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

interface Person {
    job: 'Frontend Developer' | 'Backend Developer'
}

const James: Person = {
    name: 'James Sohn',
    age: 23,
    job: 'Frontend Developer'
}

type을 사용하는 경우 '&'을 사용해서 마치 extends를 흉내낼 수는 있다. 다만, type은 타입의 별칭일 뿐이므로 단순히 인터섹션 타입을 만드는 것이지, extends를 사용한 것처럼 실질적인 확장이 일어난다고 할 수 없다.  

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

type Developer = Person & {
    job: 'Frontend Developer' | 'Backend Developer';
}

const James: Developer = {
    name: 'James Sohn',
    age: 23,
    job: 'Frontend Developer'
};

 

 

2-4. 매핑된 타입 사용 가능 여부 

매핑된 타입은 type에서는 사용 가능하지만, interface에서는 불가능하다. 

type Properties = 'name' | 'job';

type Person1 = {
  [key in Properties]: string
}

const james: Person1 = {
    name: 'James Sohn',
    job: 'Frontend Developer'
}; // -> OK!


interface Person2 {
  [key in Properties]: string
} // -> Error: A mapped type may not declare properties or methods.(7061)