Type vs Interface

 

Type 과 Interface 는 매우 유사한 기능들을 가지고 있고, 실제로 대부분의 프로젝트에서 개발자는 둘 중 어느 것을 선택해서 사용해도 상관 없을 경우가 많습니다. interface 에서 사용할 수 있는 기능의 대부분은 type 에서도 사용 가능한 경우가 많기 때문입니다.

 

차이점 1 : 선언 후 타입 확장성

 

 

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

 

하지만 그렇다고 해서 아예 둘의 차이가 전무한 것은 아닙니다. 둘의 가장 큰 차이점은 type 은 선언 시점에서 그 내용을 고칠 수 없는데 반해, interface 는 선언 후에도 얼마든지 다른 곳에서 내용을 확장할 수 있다는 점에 있습니다.

 

 

 

차이점 2 : 유틸리티 함수를 통해 만들 수 있는 것은 오직 type

 

type 은 타입스크립트에서 제공하는 유틸리티 함수를 써서 기존의 type 이나 interface 를 이용하여 새로운 type 을 만들어 낼수 있습니다. index signature 등의 편리한 기능도 interface 에서는 사용할 수 없습니다.

 

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

(출저 : https://typescript-kr.github.io/pages/utility-types.html)

 

따라서 type 은 매번 새로운 객체를 생성하고, 합성하는 일이 자주 일어나는 함수형 프로그래밍 방식에 적합하다고 말할 수 있습니다.

 

 

 

차이점 3 : Class에 적용할 타입을 생성하고, 선언 병합을 쓸 수 있는 것은 오직 interface

 

interface 는 객체 뿐만 아니라 클래스의 타입을 지정하는데에도 사용됩니다. 또한 클래스나 객체의 메서드에 오버로드를 적용할 수 있습니다(메서드가 아닌 멤버 속성은 오버로드 할수 없습니다). 따라서 이 방식은 클래스를 많이 생성하고 상속, 확장을 주로 하게 되는 객체 지향 프로그래밍 방식에 적합하다고 말할 수 있습니다.

 

interface Box {
    height: number;
    width: number;
}

interface Box {
    scale: number;
}

let box: Box = {height: 5, width: 6, scale: 10};

interface Cloner {
    clone(animal: Animal): Animal;
}

interface Cloner {
    clone(animal: Sheep): Sheep;
}

interface Cloner {
    clone(animal: Dog): Dog;
    clone(animal: Cat): Cat;
}

 

(출저 : https://typescript-kr.github.io/pages/declaration-merging.html)

 

리액트에 적용할 때는 무엇을 써야 할까?

 

[Typescript] Type Alias vs. Interface

[Typescript] Type Alias vs. Interface

 

타입스크립트의 Type 은 타입 내에 union 타입이 들어가는 순간 상속, 확장의 기능인 extends 와 implements를 사용할 수 없게 됩니다. 그러니 정말 많은 소프트웨어 개발의 핵심인 '상속과 확장에 있어서 Type 은 Interface 에 비해 더 높은 우선순위를 가질 수 없다고 결론 내릴 수 있을 것입니다.

 

type 키워드는 union 과 tuple 타입이 필요한 경우에만 사용하는 것이 바람직합니다.