티스토리 뷰

반응형
  • 처음 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
}
  • 나는 후자가 더 좋다.
반응형
프로필사진

Yowu (Yu Yongwoo)

흔한 Node.js/Java 백엔드 개발자입니다
Ubuntu와 MacOS 데스크탑 개발 환경을 선호합니다
최근에는 vscode와 IntelliJ를 사용하고 있습니다
vscode에는 neovim, IntelliJ는 ideaVim
개발용 키보드는 역시 HHKB Pro 2 무각입니다
락 밴드에서 드럼을 쳤습니다

최근에 올라온 글
최근에 달린 댓글
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함
Total
Today
Yesterday