enum, type, interface의 차이

type과 interface는 객체의 타입의 이름을 지정하는 것이다.

둘의 쓰임새는 거의 비슷하지만, 몇 가지 차이점이 있다.

 

공식문서에서 안내하는 타입과 인터페이스 차이점 (링크)

타입 별칭과 인터페이스는 매우 유사하며, 대부분의 경우 둘 중 하나를 자유롭게 선택하여 사용할 수 있습니다. interface가 가지는 대부분의 기능은 type에서도 동일하게 사용 가능합니다. 이 둘의 가장 핵심적인 차이는, 타입은 새 프로퍼티를 추가하도록 개방될 수 없는 반면, 인터페이스의 경우 항상 확장될 수 있다는 점입니다.

 

 

기본 사용법

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

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

 

 

확장

type NewType = MyType & {
 job: string;
}

interface INewInterface extends IMyInterface {
  job: string;
}

 

또한, interface는 같은 이름의 객체를 다시한번 선언하면 자동으로 확장이 된다.

(type은 타입은 한 번 생성된 뒤에는 달라질 수 없기 때문에, 재선언할 수 없다)

 

예시

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

interface IMyInterface {
  job: string;
}



//확장된 결과
interface IMyInterface {
  name: string;
  age: number;
  job: string;
}

 

 

type은 유틸리티 타입을 제공

 

type을 쓸 때, 보다 편리한 사용성을 위해 유틸리티 타입을 활용할 수 있다. (Partial<T>, Record<K,T>, Omit<T,K> 등)

유틸리티 타입을 활용하면 이미 선언한 타입 중, 자신이 원하는대로 입력받을수 있게 해주어 편리하다.

 

https://typescript-kr.github.io/pages/utility-types.html

TypeScript 한글 문서

 

 

대부분의 경우 개인적 선호에 따라 인터페이스와 타입 중에서 선택할 수 있으며,
필요하다면 TypeScript가 다른 선택을 제안할 것입니다.
잘 모르겠다면, 우선 interface를 사용하고
이후 문제가 발생하였을 때 type을 사용하기 바랍니다.

 

 

라고 타입스크립트 공식문서는 설명하고 있지만,  팀 혹은 프로젝트에서 지정한 규칙에 따라 일관성 있게 사용하면 될 것 같다.

(외부에 공개할 API는 선언 병합의 확장성을 위해 Interface 사용을 권장)

 

 

---

 

enum

enum은 열거형 데이터 타입으로, 여러 값들에 미리 이름을 정의할 때 사용한다.

(=기억하기 어려운 숫자 대신 친숙한 이름으로 접근/사용하기 위해 활용)

 

 

예시

enum Roles {
  Admin = 7,
  Teacher, //자동으로 8이 할당됨
  Student, //자동으로 9이 할당됨
  Guest //자동으로 10이 할당됨
}

...

// 로그인한게 관리자 계정이면
if(login === Roles.Admin) {
  // 어드민 페이지로 보낸다
}

 

위와 같이 아이템에 값을 명시하면 그 다음 아이템부터는 +1된 값이 들어가고,

만약 값을 생략하고 선언하면 0, 1, 2... 순서로 값이 할당된다.

 

enum을 사용하는 이유는 아래와 같다.

 

1) 하드코딩의 실수를 막기 위해 (자동완성 해주므로 오탈자를 방지할 수 있다)

2) 같은 종류를 나타내는 여러 개의 숫자/문자열을 다뤄야 하는데, 각각 적당한 이름을 붙여서 코드의 가독성을 높이고 싶을 때

 

 

 

enum과 비슷한 역할을 타입으로도 해줄 수 있다.

type LanguageCode = "ko" | "en" | "fr";

// zzz라는 값은 LanguageCode 안에 존재하지 않으므로 에러 발생
const code: LanguageCode = "zzz";

 

하지만, zzz라는 값이 LanguageCode라는 타입 안에 있는지 없는지 기억해야 하는 불편함이 있다.

아래처럼 enum을 활용하면 깔끔하게 읽히고, 값들을 관리하기 편리해진다.

 

enum LanguageEnum {
  Ko = "ko",
  En = "en",
  Fr = "fr",
}

const code: LanguageEnum = LanguageEnum.Ko

 

주의할 점은 enum의 속성 값으로는 문자열 또는 숫자만 허용된다는 것이다.