타입스크립트 type 과 interface 특징 및 비교

개요

• 자바스크립트에서 객체의 형태를 지정하는데는 type 과 interface 가 사용될 수 있다.
• type 과 interface 는 매우 가볍고 자바스크립트로 컴파일되면 사라진다.

type 알아보기

• 자바스크립트에서 기본으로 제공하는 primitive type 이외에 타입스크립트에서 사용할 사용자 정의 타입들을 직접 정의할 수 있다.
• primitive type 에 대한 alias 를 적용하는 것도 가능하다.
• 상수에 대한 타입을 정의하는 것도 가능하다.

객체 타입 정의하기

type User = {
  nickname: string;
  realname: string;
  age: number;
};

const jake: User = {
  nickname: "jake",
  realname: "jinkyu",
  age: 20,
};

단일 타입 정의

type Food = string;

const kimchi: Food = "kimchi";

상수 타입 정의

type Team = "RED" | "BLUE";

type Player = {
  team: Team;
};

const jack: Player = {
  team: "RED",
};

확장하기 (intersections)

type Animal = {
  name: string;
};

type Bear = Animal & {
  honey: boolean;
};

const bear: Bear = {
  name: "foo",
  honey: true,
};

bear.name;
bear.honey;

• & 기호를 이용해 상속도 가능하다.

클래스와 함께 사용하기

type User = {
  firstName: string;
  lastName: string;
  sayHi(name: string): string;
  fullName(): string;
};

class Player implements User {
  constructor(public firstName: string, public lastName: string) {}

  sayHi(name: string) {
    return "";
  }

  fullName() {
    return "";
  }
}

interface 알아보기

• 인터페이스는 오브젝트의 모양을 정해주기 위해서 쓴다.
• 어떻게 보면 type 보다 더 한정적인 경우에 쓴다.

객체 타입 정의

interface User {
  nickname: string;
  realname: string;
  age: number;
}

확장하기 (중복 정의하기)

interface Animal {
  kind: string;
}

interface Animal {
  age: number;
}

const bear: Animal = {
  kind: "bear",
  age: 10,
};

확장하기 (상속하기)

interface Animal {
  kind: string;
}

interface Bear extends Animal {
  age: number;
}

const bear: Bear = {
  kind: "bear",
  age: 10,
};

클래스와 함께 사용하기

interface User {
  firstName: string;
  lastName: string;
  sayHi(name: string): string;
  fullName(): string;
}

class Player implements User {
  constructor(public firstName: string, public lastName: string) {}

  sayHi(name: string) {
    return "";
  }

  fullName() {
    return "";
  }
}

• 위 코드에서 Player 는 반드시 firstName, lastName, sayHi(), fullName() 을 가져야 한다.
  • 인터페이스를 구현할 때의 접근 제어자는 반드시 public 이어야 한다.
• 추상 클래스에 비교했을 때, 위의 방식이 갖는 장점은 인터페이스는 자바스크립트 코드로 변하지 않고 사라진다는 점이다.
  • 더 깔끔하고, 필요 없는 클래스가 남지 않는다.
  • 파일사이즈가 작아진다.
• implements 는 다중 상속도 가능하다.

type 과 interface 의 차이

• interface 의 용도가 더욱 명확하다.
  • 오브젝트의 모양을 정한다.
  • type 은 용도가 많아 더 다양하게 사용될 수 있다.
• interface 는 상대적으로 더 변화에 열려있다.
  • extends 를 이용해 확장도 가능하고, 중복 정의를 통해 프로퍼티를 늘려갈 수도 있다.
  • type 은 & 기호를 이용해 intersections 를 이용해 확장이 가능하지만, 한번 정의하면 새로운 프로퍼티를 추가하긴 어렵다.
• 자바와 같은 언어의 클래스에 익숙하다면, interface 가 더 직관적으로 다가올 것이다.

type 과 interface 중 어떤 것을 써야 할까?

타입스크립트에서 좋은 설계는 최대한 좁은 타입을 쓰는 것이다. 즉, any 를 사용하지 않는 것과 같다. interface 로 해결될 문제면 더 좁은 타입에 속하는 interface 를 쓰자.

클래스나 오브젝트의 형태를 정의할 때는 interface 를 사용하자.

레퍼런스

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