[Typescript] Study TS with me (1) - basic type

평소 일하면서 Typescript를 쓰면서도, type/enum/interface 등 왜 저런 코드로 쓰는지를 생각하지 않고 그냥 사용한 적이 많았다. 이렇게 코드를 작성한 이유가 있겠지 하면서 이전 코드를 복붙하거나 의문을 가졌던 적이 별로 없다.

최근에 팀에 새로 합류한 분의 온보딩 스터디 프로젝트를 같이 리뷰하는 시간을 가졌는데, class 구현부터 Typescript를 적극적으로 사용한 걸 보면서 그 동안의 나를 반성하게 되었다.😂

다시 기초부터 차근차근 공부하면서, type 선언 정도로만 ts를 쓰는 수준이 아닌 ts의 장점을 제대로 활용하는 코드를 쓰고 싶어 이렇게 ts스터디를 시작하게 되었다.

String Literal Types

• 문자열 자체를 type으로 선언해서 사용

type All = 'all';

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

Union Types

• 2개 이상의 선언된 type을 사용할 수 있음

Union Type은 평소에 익숙하게 사용중이다. 보통 여러개 string type을 가질 때 사용했다. 아래 예제처럼 서로 다른 type들도 Union Type으로 선언해 사용할 수 있다는 걸 알았다.

type Id = number | string;

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

Discriminated Union Types

• 각각 다른 Type별로 동일한 property 이름을 가지고 있음
• 해당 property로 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 Types

• 여러개의 상수를 하나의 type으로 묶어 관리할 수 있음.

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

구글링 하다보니, Enum typ은 안정성이 떨어진다는 얘기가 꽤 많았다.

[이유]

1. transfile 되면서, bundler(rollup)에서 TreeShaking을 할 수 없음.
   관련 링크
   Tree-Shaking, const enum 등 설명할 개념이 많아서 이건 다음편으로..

2. number일 경우, type이 보장되지 않음
   

 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을 사용하는 것이 권장되는 분위기 였다.

하지만 팀의 개발 환경이나 가독성 측면에서 Enum을 사용하는 것이 더 나을 때도 있으니 충분히 설명 가능한 이유가 있다면 채택해서 사용해도 큰 문제는 없다는 글도 봤다.

TMI:
사실 우리 팀에서도 Enum Type을 꽤 사용중이다.😅😅 팀에서 굉장히 논리적인 이유로 뭐든 것을 설명하시는 시니어 개발자 분이 계신데, 다음에 출근해서 물어봐야겠다. (엄청난 합리적인 이유가 있을 것으로 예상되는...)