[Typescript] 나와 함께 공부하는 TS(1) - 기본형

평소 일하면서 Typescript를 쓰다가, type/enum/interface 등 왜 그런지 코드로 쓴다고 생각하지 않고 그냥 사용해서 휙. 이렇게 전화를 걸만한 이유는 그럴듯하지 않고 이전 코드를 복붙하거나 개념을 찾기 어려웠던 것은 아닙니다.

최근에 팀에 새롭게 한 분의 온보딩 스터디 프로젝트를 같이 리뷰하는 시간을 냈는데, 클래스 구현부터 Typescript를 표시로 걸 모니터 그 동안의 나를 반성하게 되었습니다.😂

다시 기초부터 빤히 공부하면서, 유형 장부 기록만 ts를 쓰는 수준이 아닌 ts의 장점을 활용하는 옷을 머리에 쓰고 이렇게 ts스터디를 시작하게 되었습니다.


문자열 리터럴 유형

문자열 자체를 유형으로 선언해서 사용

type All = 'all';

let selectAll: All = 'all';
selectAll = 'other'; //error

조합 유형

2개 이상 표기된 유형을 사용할 수 있음

Union Type은 평소에 일찍 사용중이다. 일반적으로 여러 문자열 유형을 거의 사용할 때 사용했습니다. 아래 예제처럼 서로 다른 유형도 Union Type으로 선언을 할 수 있고 또 걸 수도 있습니다.

type Id = number | string;

function printId(id: Id) {
 if (typeof id === "string") {
    console.log(id.toUpperCase());
 } else {
    console.log(id);
 }
}

식별된 유니온 유형

다른 각각의 유형과 동일한 속성을 가지고 있음

해당 속성으로 Type별로 구분이 가능함

 type Circle = {
  kind: 'circle',
  radius: number
 }

 type Square = {
  kind: 'square',
  x: number
 }

 type Triangle = {
  kind: 'triangle',
  x: number,
  y: number
 }

 type Shape = Circle | Square | Triangle;

 function area(s: Shape) {
  if (s.kind === "circle") { // discriminate type
    return Math.PI * s.radius * s.radius;
  } else if (s.kind === "square") { // discriminate type
    return s.x * s.x;
  } else {
    return (s.x * s.y) / 2;
  }
 }

열거형 유형

여러 개의 소유권을 하나의 유형으로 묶을 수 있음.

enum Direction {
  Up = 1, // 시작하는 숫자를 할당해 줄 수 있음(default는 0) 
  Down,
  Left,
  Right,
}

Google링 하다보니, Enum type은 안정적이거나 말하는 것은 꽤 쟁쟁합니다.

[이유]

transfile, bundler(rollup)에서 TreeShaking을 할 수 없습니다.
관련 링크Tree-Shaking , const enum 등 설명할 컨셉이 빤 다음편으로..

번호일 경우, 유형이 보증되지 않습니다

 type enum DAYS = {
  Mon,
  Tue,
  Wed,
  Thur,
  Fri,
  Sat,
  Sun
 }

 let day = DAYS.Mon;
 day = DAYS.Wed;
 day = 10; // error지만 compile시 error가 발생하지 않음!(= type이 보장되지 않는다)

Enum type은 Union Type으로 복제가능하기 때문에 Union Type을 사용하는 것이 권장되는 분위기였다.

그러나 팀의 개발 환경이나 가독성 측면에서 열거형을 사용하는 것이 더 나를 좋아할 만큼 충분히 설명하는 이유가 있다면 채택해서 사용해도 큰 문제는 반대 글도 보고 있습니다.

TMI:
사실 우리 팀에서도 Enum Type을 꽤 사용중이다. (엄청난 합리적인 이유가 있을 것으로 예상되는...)