[TypeScript] Type vs Interface

TypeScript에서 Type과 Interface의 차이점에 대해 알아보겠습니다.

 

Type vs Interface

// Object 선언할 때
interface IObject {
    x: number;
    y: number;
}

type TObject = {
    x: number;
    y: number;
}

// Function 선언할 때
interface IFunction {
    (x: number, y: number): number;
}

type TFunction = (x: number, y: number) => number;

interface와 type은 객체나 함수의 타입을 선언하는 데 사용될 수 있습니다.

 

type은 할 수 있지만 interface에서는 할 수 없는 것들

primitive 타입 선언하기

type에서는 primitive 타입을 선언할 수 있지만, interface에서는 할 수 없습니다.

type Name = string;

 

Union 타입 선언하기
type에서는 union 타입을 선언할 수 있습니다.

type UnionType = string | number;

 

primitive List 또는 Tuple 타입 선언하기
type에서는 primitive list 또는 tuple타입을 선언할 수 있습니다.

type TupleType = [number, string];

 

 

interface에서는 할 수 있지만 type에서는 못하는 것들

interface Merging

interface는 같은 이름의 interface를 선언할 때, 자동으로 합쳐집니다.
이를 "Interface Merging"이라고 합니다.

interface IRectangle {
    height: number;
}

interface IRectangle {
    width: number;
}

let rectangle: IRectangle = {
    height: 200,
    width: 100,
}

type에서는 위와 같은 방식으로 선언할 수 없습니다.

 

클래스 구현

interface는 클래스에서 구현할 수 있습니다.

클래스에서 interface를 구현하면 해당 인터페이스의 프로퍼티와 메서드를 반드시 구현해야 합니다.

interface GetXnY {
    getX: (x: number) => number;
    getY: (y: number) => number;
}

class Review implements GetXnY {
    getY = (x: number) => { return x };
    getX(x: number) {
        return x;
    }
}

 

 

 

 

어떤 것을 선택할지는 프로젝트의 특정 요구사항과 스타일에 따라 다를 수 있습니다.

일반적으로는 interface를 먼저 고려하고 type이 더 적합할 때 사용하는 것이 좋습니다.