TS015. 타입스크립트에서 타입과 인터페이스의 차이

타입과 인터페이스의 차이

• interface 는 시기상 type 보다 나중에 등장했다.
• 그렇다고 interface 가 type 의 상위호환은 아니고 각자만의 역할이 존재한다.

오브젝트 선언 방법 알아보기

type 의 경우

• 일반 자바스크립트에서 오브젝트를 선언하는 것과 흡사하다.
• 함수의 시그니처를 선언할 때는 표현식처럼 선언한다.

// 일반 오브젝트 선언
type t = {
  x: number;
  y: number;
};

// 함수 시그니처
type t = (x: number, y: number) => number;

// 오브젝트 메서드
type t = {
  foo(x: number): number;
};

interface 의 경우

• 인터페이스도 일반 자바스크립트에서 오브젝트를 정의하는 것과 흡사하게 선언한다.
• 타입과 다르게 = 기호를 사용하지 않는다.
• 함수의 시그니처를 선언할 때, 아래의 코드 스니펫처럼 선언한다.

// 일반 오브젝트 선언
interface inter {
  x: number;
  y: number;
}

// 함수 시그니처
interface inter {
  (x: number, y: number): number;
}

// 오브젝트 메서드
interface inter {
  foo(x: number): number;
}

interface 만 할 수 있는 것

• type 은 못하고 interface 만 할 수 있는 것도 있다.

인터페이스 병합 (interface merging)

• 아래와 같이 User 인터페이스를 2번 선언하면, 중복 선언에 대한 에러가 나는 것이 아니라 2개의 인터페이스가 머지된다.

interface User {
  name: string;
}

interface User {
  age: number;
}

• 아래는 머지의 결과이다.

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

인터페이스 병합 시 유의사항 1: 메서드 오버로드

• 인터페이스에서 객체 메서드를 병합하면 오버로드가 일어난다.

interface int1 {
  foo(x: number): number;
}

interface int1 {
  foo(x: string): number;
}

const obj1: int1 = {
  foo(x) {
    // 에러, 오버로드가 되었기 때문에 string 이 들어왔을 때 반환 타입이 string 이 되어버림
    return x;
  },
};

const obj2: int1 = {
  foo(x) {
    // 정상, 오버로드 된 케이스들을 전부 처리 가능
    return 1;
  },
};

인터페이스 병합 시 유의사항 2: 콜백함수 시그니처가 다른 경우에 나는 에러

• 특정 프로퍼티에 삽입되는 콜백함수의 시그니처를 정의할 때는 객체 메서드 때처럼 오버로드가 일어나지 않고 그냥 에러가 나버린다.

interface int2 {
  foo: (x: number) => number;
}

interface int2 {
  foo: (x: string) => number; // 에러, 프로퍼티 콜백함수로 줄 때 완전히 똑같은 타입으로만 interface merging 이 가능하다.
}

인터페이스 상속 (extends)

• 인터페이스는 다른 인터페이스를 상속할 수 있다.

interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

구현 (implementation)

• 인터페이스는 클래스와 함께 쓰여 클래스가 반드시 구현해야 할 것을 정의할 수 있다.

interface Shape {
  draw(): void;
}

class Circle implements Shape {
  draw() {
    // 구현
  }
}

type 만 할 수 있는 것

• type 만 할 수 있는 것도 있다.

유니온 타입 (Union Type)

type StringOrNumber = string | number;

타입 인터섹션 (Type Intersection)

• 여러개의 타입을 하나로 교차(Intersection) 시킬 수 있다.

type Employee = Person & { employeeId: number };

맵드 타입 (Mapped Types)

• 맵드 타입을 만드는데 type 을 사용할 수 있다. 일부 속성을 기반으로 유형을 변환하는 방법이다.

type Readonly<T> = { readonly [P in keyof T]: T[P] };

튜플 및 특정 형태 만들기

• 2차원 좌표의 경우, 배열 사이즈와 타입이 강제되어 있는 튜플로 표기하기 적합하다.

type Point = [number, number];

타입의 병합?

• 타입은 인터페이스처럼 병합하려고 하면 에러가 나니 조심해야 한다.
• 인터페이스처럼 병합하려면 intersection (&) 을 이용해야 한다.

type User = {
  name: string;
};

// 중복 선언 에러
type User = {
  age: number;
};

정리

• 인터페이스는 클래스에 의해 확장되거나 구현될 수 있는 객체 모양을 정의하는데 더 적합하다.
  • 인터페이스 선언 병합을 지원하고, 객체지향 디자인 패턴에 더 부합한다.
• 타입은 유니언와 인터섹션을 통해 타입을 결합하는데 더 유연하고 튜플과 같이 더 다양한 모양을 나타낼 수 있다.