DIL: 이펙티브 타입스크립트

스터디: 월간 CS, https://github.com/monthly-cs/2024-05-effective-typescript
작성일: 2024-06-17
작성자: dusunax

---

코드를 작성하고 실행하기

아이템 53: 타입스크립트 기능보다는 ECMAScript 기능을 사용하기 Prefer ECMAScript Features to TypeScript Features

옛날 옛적에

바야흐로 타입스크립트 초기 2010년 경, 자바스크립트는 클래스, 데코레이터, 모듈 시스템 같은 기능이 없었다...

자바스크립트는 프레임워크나 트랜스파일러로 이를 보완하였고, 타입스크립트도 초기 버전에는 독립적으로 개발한 클래스, enum, 모듈 시스템을 포함시킬 수 밖에 없었다...

시간이 흐르며... 자바스크립트 표준 기구인 TC39는 부족했던 점들을 내장 기능으로 추가했는데 이는 타입스크립트 초기 버전에서 독립적으로 개발했던 기능과, 자바스크립트에 새로 추가된 기능이 호환성 문제를 발생시키는 원인이 된다...

타입스크립트 진영은 (1) 타입스크립트 초기 버전 형태를 유지하기 위해 자바스크립트 신규 기능을 변형하여 끼워 맞추거나, (2) 자바스크립트의 신규 기능을 그대로 채택하고 타입스크립트 초기 버전을 포기하는 두 가지 전략 중 하나를 선택하게 된다...

대부분의 진영이 두 번째 전략을 선택하였고, 그 이후로 TC39는 런타임 기능을 발전 시키고, 타입스크립트 팀은 타입 기능만 발전시킨다는 명확한 원칙을 세우고 이를 지켜오고 있다.

그런데 이 원칙이 세워지기 전 이미 사용되고 있던 몇 가지 기능이 있었다. 이 기능들은 타입 공간과 값 공간의 경계를 혼란스럽게 만들게 된다... 다음 화에 이어서...

열거형 enum

• 값의 모음! 열거형!
  • 값의 모음을 나타내기 위해서 많은 언어에서 사용함

enum Flavor {
  Vanilla = 0,
  Chocolate = 1,
  Strawberry = 2,
}

let flavor = Flavor.Chocolate;
//  ^? let flavor: Flavor

Flavor; // Autocomplete shows: Vanilla, Chocolate, Strawberry
Flavor[0]; // Value is "Vanilla"

타입스크립트 열거형 enum의 문제점

• 숫자형 열거형에서는 정의된 숫자 외의 값이 할당될 수 있는 가능성 => 의도하지 않은 동작 초래

let flavor: Flavor = 3; // 오류가 발생하지 않음, 의도하지 않은 값 할당

• 상수 열거형(const enum)은 런타임에 완전히 제거되어 최적화됨(열거형 값이 사라짐)

const enum Flavor {
  Vanilla = 0,
  Chocolate = 1,
  Strawberry = 2,
}

let flavor = Flavor.Chocolate;

• js 컴파일

• tsconfig.json의 preserveConstEnums 플래그 사용

{
  "compilerOptions": {
    "preserveConstEnums": true,
    // ...
  }
}

// js
var Flavor;
(function (Flavor) {
    Flavor[Flavor["Vanilla"] = 0] = "Vanilla";
    Flavor[Flavor["Chocolate"] = 1] = "Chocolate";
    Flavor[Flavor["Strawberry"] = 2] = "Strawberry";
})(Flavor || (Flavor = {}));
var flavor = Flavor.Chocolate;

문자열 열거형

• 문자열 열거형은 런타임에도 안정성 & 투명성 제공
  • 타입스크립트의 다른 타입과 달리 구조적 타이핑(duck typing)이 아닌 명목적 타이핑(nominally typing) 사용
    • 라이브러리를 공개할 때 필요

enum Flavor {
  Vanilla = "Vanilla",
  Chocolate = "Chocolate",
  Strawberry = "Strawberry",
}

let flavor: Flavor = Flavor.Chocolate;
console.log(flavor); // 출력값: "Chocolate"

• 자바스크립트와 타입스크립트의 동작 차이

function scoop(flavor: Flavor) {
  /* ... */
}

// 자바스크립트
scoop("vanilla");

// 타입스크립트: 열거형을 임포트하고 문자열 대신 사용해야 한다
import { Flavor } from "ice-cream";
scoop(Flavor.VANILLA);

• JS와 TS의 동작이 다르기 때문에 문자열 열거형을 사용하지 않는 것이 좋다!
  • 리터럴 유니온을 사용하자: 안전하고, JS와 호환되고, 자동완성 기능을 사용할 수 있다.

type Flavor = "vanilla" | "chocolate" | "strawberry";
let flavor: Flavor = "vanilla";

매개변수 속성

• 클래스를 초기화할 때, 속성 할당을 위해 생성자의 매개변수 사용

// JS
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

// TS
class Person {
  constructor(public name: string) {} // 멤버 변수로 name을 선언한 것과 동일하게 동작한다.
}

매개변수 속성의 문제점

• 일반적으로 TS 컴파일은 타입 제거가 이뤄지므로 코드가 줄어들지만 => 매개변수 속성은 코드가 늘어난다
• 매개변수 속성이 런타임에는 사용되지만 => TS 관점에서 안 쓰는 것처럼 보임
• 매개변수 속성과 일반 속성을 섞어서 사용 시 클래스 설계가 혼란스럽다

class Person {
  first: string;
  last: string;
  constructor(public name: string) {
    [this.first, this.last] = name.split(" ");
  }
}
// Person 클래스에 first, last, name 속성이 있다.
// 클래스에 매개변수 속성만 존재한다면? 클래스 대신 인터페이스로 만들고 객체 리터럴을 사용하자

class PersonClass {
  constructor(public name: string) {}
}
const p: PersonClass = { name: "Jed Bartlet" }; // 매개변수 속성 OK

interface Person {
  name: string;
}
const jed: Person = new PersonClass("Jed Bartlet");

네임스페이스와 트리플 슬래시 임포트 (/// )

• ES6이전에는 JS에 공식적 모듈 시스템이 없었다.
  • Node.js는 required와 module.exports를 사용
  • AMD는 define 함수와 콜백
  • 타입스크립트 역시 자체적 모듈 시스템: module 키워드와 트리플 슬래시
    • 모듈 시스템과 충돌을 피하기 위해서 module 대신 namespace 키워드를 추가함
• module과 /// 사용하지 않기 => ES6의 모듈 사용해야 함

module Foo
// index.ts
/// <reference path="other.ts"/>
foo.bar();

데코레이터

• 클래스, 메서드, 속성에 annotation 붙이기!
  • 앵귤러 프레임워크를 지원하기 위해 추가되었었다.
  • tsconfig.json의 experimentalDecorators 설정 활성화 필요
• 데코레이터는 표준화가 완료되지 않았지만, 타입스크립트에서 실험적으로 사용할 수 있음

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  @logged // <-- 데코레이터
  greet() {
    return `Hello, ${this.greeting}`;
  }
}

function logged(originalFn: any, context: ClassMethodDecoratorContext) {
  return function (this: any, ...args: any[]) {
    console.log(`Calling ${String(context.name)}`);
    return originalFn.call(this, ...args);
  };
}

console.log(new Greeter("Dave").greet());
// 출력 결과:
// Calling greet
// Hello, Dave

• ex) NestJS는 데코레이터를 광범위하게 사용하는 프레임워크 => 모듈, 컨트롤러, 서비스 등을 정의할 때 데코레이터 사용

Things to Remember

• By and large, you can convert TypeScript to JavaScript by removing all the types from your code.
• Enums, parameter properties, triple-slash imports, experimental decorators, and member visibility modifiers are historical exceptions to this rule.
  • 일반적으로 타입 정보를 제거하면 자바스크립트가 되지만 열거형, 매개변수 속성, 트리플 슬래시 임포트, 데코레이터와 같이 타입 정보를 제거한다고 자바스크립트가 되지는 않는 경우가 있다.
• To keep TypeScript’s role in your codebase as clear as possible and to avoid future compatibility issues, avoid nonstandard features.
  • 앞서 나열한 기능 => 타입 스크립트의 역할을 명확하게 하기 위해 사용하지 않는 것이 좋다.