09/13_Devlog

Firebase

TypeScript

.ts와 .tsx의 차이점

.ts 는 순수 TypeScript 파일에 사용된다.
.tsx 는 JSX가 포함된 파일에 사용된다.

stackoverflow.com

enum

Enum은 추상화의 수단으로 사용된다. 만약 다음과 같은 언어 코드를 지정하는 변수를 string 타입으로 설정하면 범위가 너무 넓어진다.

const code: string = 'en' //  'ko' | 'en' | 'ja' | 'zh' | 'es'

이는 다음과 같이 여러 개의 상수를 두어 지정할 수 있다.

const korean = 'ko'
const english = 'en'
const japanese = 'ja'
const chinese = 'zh'
const spanish = 'es'

type LanguageCode = 'ko' | 'en' | 'ja' | 'zh' | 'es'

const code: LanguageCode = korean

그러나 이렇게 일일히 선언하지 않고도 가독성을 높여주는 것이 바로 enum이다.

export enum LanguageCode {
  korean = 'ko',
  english = 'en',
  japanese = 'ja',
  chinese = 'zh',
  spanish = 'es',
}

const code: LanguageCode = LanguageCode.korean

이러한 enum은 그 자체로 객체이나 그냥 객체를 사용하는 것과는 다음의 차이가 존재한다.
1. enum의 속성은 자유롭게 바꿀 수 없다.
2. enum은 항상 리터럴 타입이 사용된다.
3. enum의 속성 값으로는 문자열 또는 숫자만 허용된다.

결론적으로 enum을 쓰는 상황을 정리하면 다음과 같다.

같은 ‘종류’를 나타내는 여러 개의 숫자 혹은 문자열을 다뤄야 하는데, 각각 적당한 이름을 붙여서 코드의 가독성을 높이고 싶은 경우 enum을 사용한다.

type과 interface의 차이점

tslint의 가이드를 참고하면 Type은 리터럴 타입의 값에만 사용하고, Object형태의 타입을 잡아줄 때는 Interface를 사용하면 좋다고 한다.

TypeScript enum을 사용하는 이유