type vs interface

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

Documentation - Everyday Types

TypeScript 공식 사이트에서 간략하게 차이를 설명하고 있다.

1. 선언

Interface 와 type 모두 타입을 정의하는 주요 방법이지만, 선언 방식과 정의 할 수 있는 경우의 차이가 존재한다. 

둘다 객체와 함수를 정의할 수 있지만 string, number, union, tuple 등 기본 타입은 type 에서만 선언 할 수 있으며 interface에서는 불가능하다.

interface primitive_type = string; // Error
interface union_type = string | number; // Error
interface tuple_type = [string, number]; // Error

interface object_type { a: string }; // OK
type object_type2 = { a: string }; // OK
interface function_type { (a: string): number }; // OK
type function_type2 = (a: string) => number; // OK
type function_type3 = { (a: string): number }; // OK

type primitive_type2 = string; // OK
type union_type2 = string | number; // OK
type tuple_type2 = [string, number]; // OK

2. 상속 방식

interface와 type 모두 상속이 가능하지만 방식에 차이가 있다.

2.1 Interface 의 선언 병합 ( Declaration Merging )

두 개의 같은 이름의 interface가 하나의 interface로 병합된다. 이는 type에는 없는 기능이다.

interface User {
    name: string;
}

interface User {
    age: number;
}

// result
// interface User {
//     name: string;
//     age: number;
// }

 

2.2 interface extends

extends를 사용하여 기존 interface를 상속할 수 있다.

interface User {
    name: string;
}

interface NewUser extends User {
    age: number;
}

// result
// interface NewUser {
//     name: string;
//     age: number;
// }

선언 병합과 extends의 가장 큰 차이는 선언 병합은 같은 이름의 interface를 하나로 합쳐서 사용하는 것이고 extends는 새로운 이름으로 기존 interface를 재사용하려고 할 때 유용하다.

2.3 type의 & 연산자

& 연산자를 사용해 상속받은 것처럼 사용할 수 도 있다.

type User = {
    name: string;
}

type NewUser = User & {
    age: number;
}

// result: NewUser
// type NewUser = {
//     name: string;
//     age: number;
// }

2.4 interface 와 type 끼리 상속

interface와 type끼리도 상속이 가능하다.

interface extends type
interface User { name: string; }
type NewUser = User & { age: number; }
type extends interface
type User = { name: string; }
interface NewUser extends User { age: number; }

2.5 type의 & 연산자 vs interface의 extends

인터페이스는 상위 프로퍼티에 대해서 변경할 수 없지만 type의 & 연산자는 상위 프로퍼티를 변경하기에 병합이 가능하다.

interface User {
    name: string;
}

// Error
interface NewUser extends User {
    name: number;
}

type User = {
    name: string;
}

// OK
type NewUser = User & {
    name: number;
}

// result
type NewUser = {
   name: never;
}

3. 결론

type 과 interface는 상당히 유사하다.
개발자는 자신이 사용하고 싶은 것을 사용하면 되는데, 객체라면 interface를 아니라면 type을 사용하도록 통일하는 것이 좋게 보인다.
interface가 주로 클래스와 객체 지향 프로그래밍에 적합하고 type은 다양한 타입 표현 및 복잡한 타입을 생성하는데 특화되어 있다고 생각하기 때문이다.
참고 :  https://www.geeksforgeeks.org/what-is-the-difference-between-interface-and-type-in-typescript/

What is the difference between interface and type in TypeScript ? - GeeksforGeeks

https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript

Interfaces vs Types in TypeScript