[TypeScript TIPS] Interface 를 써야할 때와 Type 을 써야할 때

• 처음 TypeScript 2.x 버전 대를 익히면서 가장 혼란이 왔던 부분이 어떤 상황에서 Interface 를 사용하고, 어떤 상황에서 Type 을 사용해야하는지 명확하지 않다는 것이다.

export type SomeMbmerType = {
  name: string;
  age: number;
  address: string;
  tier: string;
};

export interface SomeMemberInterface {
  name: string;
  age: number;
  address: string;
  tier: string;
}

• 다행히 최근 lastest 버전의 tslint 에서는 어느 정도 가이드를 잡아준다.
  • Use an interface instead of a type literal.tslint(interface-over-type-literal)
    • 타입은 리터럴 타입에서만 사용하고 Object 형태의 타입은 인터페이스를 쓰라는 소리다.
• 그렇다. Type 은 리터럴 타입의 값에만 사용하고, Object 형태의 타입을 잡아줄 때는 Interface 를 사용하면 고민없이 행복해진다.

export type TSomeMemberTier = "Basic" | "Premium" | "Admin";

export interface ISomeMember {
  name: string;
  age: number;
  address: string;
  tier: TSomeMemberTier;
}

++

• 대략 typescript 3.x 부터 tslint 가 모든 인터페이스 네이밍 앞에 대문자 I 를 강제한다.
  • interface name must start with a capitalized Itslint(interface-name)
  • 물론 해당 옵션을 끌수도 있지만 나는 그냥 I 를 prefix 로 사용한다. C#의 영향일까..
  • 그럼 타입 앞에도 대문자 T 를 붙여줘야 할까? tslint 에서 강제하는 부분은 없다. 아직까지는 개인의 선호에 맞게 사용할 수 있는 듯
    • TSomeMemberTier or SomeMemberTierTypes
• 사실 위 케이스와 같은 경우 나는 Type 보다는 Enum 사용을 더 선호한다. 실제 코드 상에서 상수 값을 제거할 수 있기 때문이다.

export enum SOME_MEMBER_TIER {
  BASIC = "BASIC",
  PREMIUM = "PREMIUM",
  ADMIN = "ADMIN"
}

export interface ISomeMember {
  name: string;
  age: number;
  address: string;
  tier: SOME_MEMBER_TIER;
}

• Enum 은 기본적으로 number 매핑이지만 나는 string 매핑을 더 선호한다. number 매핑을 사용될 경우 실제 데이터에도 number 가 들어가서 raw data 보기가 영 힘들다.
  • 개인적으로 비즈니스 로직이 포함된 코드 내에 상수 사용을 꺼리는 편이다.

/**
 * ISomeMember.type 에 Type 을 사용했을 경우
 * ISomeMember.type: TSomeMemberTier
 */
const member: ISomeMemberWithType = {
  /** ...some data */
};

if (member.tier === "Basic") {
  // some logic
}
if (member.tier === "Premium") {
  // some logic
}

/**
 * ISomeMember.type 에 Enum 을 사용했을 경우
 * ISomeMember.type: SOME_MEMBER_TIER
 */
const member: ISomeMemberWithEnum = {
  /** ...some data */
};

if (member.tier === SOME_MEMBER_TIER.BASIC) {
  // some logic
}
if (member.tier === SOME_MEMBER_TIER.PREMIUM) {
  // some logic
}

• 나는 후자가 더 좋다.