TypeScript - type과 interface의 차이

지은·2023년 3월 14일
22

TypeScript에서 typeinterface는 비슷한 역할을 하는 것 같은데, 어떤 경우에는 type을 사용하는 게 좋고 어떤 경우에는 interface를 사용하는 게 좋은지 궁금해서 알아보았다.

확장(상속)하는 법

interface

extends 키워드를 이용해서 확장할 수 있다.

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

interface Student extends Person { // 확장(상속)
  school: string;
}

const jieun: Student = {
  name: 'jieun',
  age: 27,
  school: 'HY'
}

type

& 기호를 이용해서 확장할 수 있다.

type Person = {
  name: string,
  age: number
}

type Student = Person & { // 확장(상속)
  school: string
}

const jieun: Student = {
  name: 'jieun',
  age: 27,
  school: 'HY'
}

선언적 확장

interface

선언적 확장(Declaration Merging)이 가능하다.
(같은 이름의 interface를 선언하면, 자동으로 확장된다.)

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

interface Person { // 선언적 확장
  gender: string;
}

const jieun: Person = {
  name: 'jieun',
  age: 27,
  gender: 'female'
}

type

선언적 확장이 불가능하다.

type Person = {
  name: string;
  age: number;
}

type Person = { // ❗️Error: Duplicate identifier 'Person'.
  gender: string;
}

➡️ 따라서 타입 객체의 확장성을 위해서는 interface를 사용하는 것이 더 좋다.


자료형(type)

interface

객체(Object)의 타입을 설정할 때 사용할 수 있으며, 원시 자료형에는 사용할 수 없다.

interface Person {
  name: string;
  age: number;
  gender: string;
}
interface name extends string { // ❌ 불가능
  ...
}

type

객체 타입을 정의할 때도 사용할 수 있지만, 객체 타입을 정의할 때는 interface를 사용하는게 좋고,
단순한 원시값(Primitive Type)이나 튜플(Tuple), 유니언(Union) 타입을 선언할 때 type을 사용하는 것이 좋다.

type Name = string; // primitive
type Age = number;
type Person = [string, number, boolean]; // tuple
type NumberString = string | number; // union
type Person = { // 객체는 interface를 사용하도록 하자.
  name: string,
  age: number,
  gender: string
}

computed value 사용

interface

computed value 사용이 불가능하다.

type Subjects = 'math' | 'science' | 'sociology';

interface Grades {
  [key in Subjects]: string; // ❗️Error: A mapped type may not declare properties or methods.
}

type

computed value 사용이 가능하다.

type Subjects = 'Math' | 'Science' | 'Sociology';

type Grades = {
  [key in Subjects]: string;
}

정리

type모든 타입을 선언할 때 사용할 수 있고, interface객체에 대한 타입을 선언할 때만 사용할 수 있다.
또한 확장 불가능한 타입을 선언하고 싶다면 type을 사용하면 되고, 확장 가능한 타입을 선언하고 싶다면 interface를 사용하면 된다.
interface vs type alias

profile
블로그 이전 -> https://janechun.tistory.com

7개의 댓글

comment-user-thumbnail
2023년 3월 14일

두가지의 차이점 정리가 완전 깔끔해서 쉽게 이해하고 갑니다!

답글 달기
comment-user-thumbnail
2023년 3월 19일

전 그냥 객체나 다른 것들의 모양만을 잡아주는게 interface, 다른 것들을 만들어주는데 type이라고 생각하고있었는데 생각보다 다양하게 차이점들이 있네요! 잘봣읍니다

답글 달기
comment-user-thumbnail
2023년 3월 19일

마무리 정리까지 @
:D 넘 깔끔해요 잘보고갑니당ㅎㅎ

답글 달기
comment-user-thumbnail
2023년 3월 19일

쓰면서도 몰랐던 차이점 기억하고 가겠슴돠!

답글 달기
comment-user-thumbnail
2023년 3월 19일

타스 예습하고 갑니다 ~~!

답글 달기
comment-user-thumbnail
2023년 3월 19일

모르고 구별없이 막 쓰고 있는 1인

답글 달기
comment-user-thumbnail
2024년 2월 28일

개인적으로는 선언적 확장은 타입스크립트를 쓰는 주요 목표와 맞지 않다고 생각해요. 명시적으로 상속을 통해 새 인터페이스로 확장하는 것이 좋아보여요.

답글 달기