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

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

---

아이템 20: 다른 타입에는 다른 변수 사용하기 Use Different Variables for Different Types

• 타입스크립트에서 "변수의 값은 바뀔 수 있지만 그 타입은 보통 바뀌지 않는다"
• 타입을 바꾸는 법
  • type narrowing: 타입을 "좁힌다"

다른 타입에는 별도의 변수를 사용하는 게 바람직

let productId: string | number = "12-34-56";
fetchProduct(productId);

// 타입을 좁혀서 다른 타입을 사용할 수 있습니다.
productId = 123456; // OK
fetchProductBySerialNumber(productId); // OK

// 다른 변수를 사용하는 것이 좋습니다
const productId = "12-34-56";
fetchProduct(productId);

const serial = 123456; // OK
fetchProductBySerialNumber(serial); // OK

// 스코프
const productId = "12-34-56";
fetchProduct(productId);

{
  const productId = 123456; // OK
  fetchProductBySerialNumber(productId); // OK
}

• 장점
  • 서로 관련이 없는 두 개의 값을 분리
  • 변수명을 더 구체적으로 지을 수 있음
  • 타입 추론을 향상시키며, 불필요한 타입 구문x
  • 타입이 간결해짐 (유니온을 안 쓸 수 있다)
  • let 대신 const로 선언하여, 간결하고 타입을 추론하기 쉬운 코드 작성
• 결론
  • 타입이 바뀌는 변수를 피하자
  • 목적이 다른 곳에는 별도의 변수명을 사용하자

shadowed 변수

let x = 10;

function example() {
  // 지역 스코프
  let x = 20; // This 'x' shadows the outer 'x'
  console.log(x); // 20
}

example();
console.log(x); // 10

Things to Remember

• While a variable's value can change, its type generally does not.
  • 변수의 값은 바뀌지만, 일반적으로 타입은 바뀌지 않는다
• To avoid confusion, both for human readers and for the type checker, avoid reusing variables for differently typed values.
  • 혼란을 막기 위해, 타입이 다른 값을 다룰 때는 변수를 재사용하지 않기

아이템 21: 타입 넓히기 Understand How a Variable Gets Its Type

• 런타임에 모든 변수는 유일한 값을 가진다
• 정적 분석 시점(타입스크립트가 작성된 코드를 체크하는 시점)에 변수는 가능한 값들의 집합인 타입을 가진다

Type Widening

• 상수로 변수를 초기화해서 타입을 명시하지 않으면, 타입 체커가 타입을 결정해야 한다.

  • 지정된 단일 값들을 가지고, 할당 가능한 값들의 집합을 유추한다
    • 정보가 충분하지 않으면, 어떤 타입으로 추론되어야하는 지 알 수 없다 (작성자의 의도를 추측한다)

  interface Vector3 {
    x: number;
    y: number;
    z: number;
  }
  function getComponent(vector: Vector3, axis: "x" | "y" | "z") {
    return vector[axis];
  }
  
  let x = "x"; // const로 선언할 시 "x" 유닛 타입
  let vec = { x: 10, y: 20, z: 30 };
  getComponent(vec, x);
  //                ~ Argument of type 'string' is not assignable
  //                  to parameter of type '"x" | "y" | "z"'
  

Type widening을 제어할 수 있는 방법

• TypeScript에서 타입을 더 좁은 범위로 추론하도록 제어하는 방법에는 여러 가지가 있음
• 변수나 상수의 타입을 명시적으로 지정하거나, 타입 체커에 추가적인 정보를 제공하여 가능한 한 좁은 타입으로 추론하게 함

1. const로 변수를 선언하면 더 좁은 타입이 된다

• const를 사용하면 변수는 재할당이 불가능해지므로 더 좁은 타입으로 추론
• 그러나 객체와 배열의 경우, 내부 요소들은 여전히 넓은 타입으로 추론될 수 있음
• 다른 속성 추가할 수 없어 객체를 한 번에 만들어야 함(아이템 23)

2. 타입 체커에 추가적인 문맥을 제공 (함수의 매개변수로 값 전달 등)

function processPoint(point: { x: 10; y: 20 }) {
  // processPoint 내부에서는 point의 타입이 { x: 10, y: 20 }로 추론됩니다.
}
const p = { x: 10, y: 20 };
processPoint(p);

3. const 단언문을 사용 (as const)

• 값 뒤에 as const를 작성하면, 타입스크립트는 최대한 좁은 타입으로 추론합니다.

const point = { x: 10, y: 20 } as const; // Type is { readonly x: 10, readonly y: 20 }

4.satisfies 키워드를 사용

• satisfies 키워드는 capitalsBad 객체가 `Record<string, Point>`` 타입을 만족하는지 확인
• 이 경우, 각 속성의 값이 Point 타입(즉, [number, number])을 충족하지 않으면 오류 발생
• 특징
  • satisfies 키워드는 타입 확인을 수행하지만, 변수의 원래 타입을 변경하지 않음
  • as와 달리, satisfies는 타입 단언을 하지 않으므로 타입 안전성을 유지

type Point = [number, number];
const capitalsBad = {
  ny: [-73.7562, 42.6526, 148],
  //  ~~ Type '[number, number, number]' is not assignable to type 'Point'.
  ca: [-121.4944, 38.5816, 26],
  //  ~~ Type '[number, number, number]' is not assignable to type 'Point'.
} satisfies Record<string, Point>;

Things to Remember

• Understand how TypeScript infers a type from a literal by widening it.
  • 타입스크립트가 리터럴에서 어떻게 타입을 넓히는 지 이해하기
• Familiarize yourself with the ways you can affect this behavior: const, type annotations, context, helper functions, as const, and satisfies.
  • 동작에 영향을 줄 수 있는 방법들:

아이템 22: 타입 좁히기 Understand Type Narrowing

null 체크하기

const elem = document.getElementById("what-time-is-it");
//    ^? const elem: HTMLElement | null
if (!elem) throw new Error("Unable to find #what-time-is-it"); // null을 체크함
elem.innerHTML = "Party Time".blink();
// ^? const elem: HTMLElement

Type narrowing 타입 좁히기 예시

// [분기문] 값의 타입을 instacneof를 사용하여 좁힘
function contains(text: string, search: string | RegExp) {
  if (search instanceof RegExp) {
    return !!search.exec(text);
    //       ^? (parameter) search: RegExp
  }
  return text.includes(search);
  //                   ^? (parameter) search: string
}

// [속성 체크] 속성의 존재 여부로 interface 타입 좁히기
interface Apple {
  isGoodForBaking: boolean;
}
interface Orange {
  numSlices: number;
}
function pickFruit(fruit: Apple | Orange) {
  if ("isGoodForBaking" in fruit) {
    fruit;
    // ^? (parameter) fruit: Apple
  } else {
    fruit;
    // ^? (parameter) fruit: Orange
  }
  fruit;
  // ^? (parameter) fruit: Apple | Orange
}

// [내장 함수]
function contains(text: string, terms: string | string[]) {
  const termList = Array.isArray(terms) ? terms : [terms]; // 내장 메소드로 타입 좁히기
  //    ^? const termList: string[] 이제 string 배열
  // ...
}

// [tagged union] 태그된 유니온, 또는 구별된 유니온 discriminated union
interface UploadEvent {
  type: "upload"; // 유니온!
  filename: string;
  contents: string;
}
interface DownloadEvent {
  type: "download"; // 유니온!
  filename: string;
}
type AppEvent = UploadEvent | DownloadEvent;

function handleEvent(e: AppEvent) {
  switch (e.type) {
    case "download": // 활용
      console.log("Download", e.filename);
      //                      ^? (parameter) e: DownloadEvent
      break;
    case "upload":
      console.log("Upload", e.filename, e.contents.length, "bytes");
      //                    ^? (parameter) e: UploadEvent
      break;
  }
}

// 사용자 정의 타입 가드
function isInputElement(el: Element): el is HTMLInputElement {
  return "value" in el;
}

function getElementContent(el: HTMLElement) {
  if (isInputElement(el)) {
    // 인풋 엘리먼트이냐?
    return el.value;
    //     ^? (parameter) el: HTMLInputElement
  }
  return el.textContent;
  //     ^? (parameter) el: HTMLElement
}

// 커스텀 타입 가드 예시
function isDefined<T>(x: T | undefined): x is T {
  return x !== undefined;
}

const jackson5 = ["Jackie", "Tito", "Jermaine", "Marlon", "Micheal"];
const members = ["Janet", "Micheal"]
  .map((who) => jackson5.find((n) => n === who))
  .filter(isDefined); // filter(x => x !== undefined)은 반환되는 타입에 영향을 주지 않음

꼼꼼히 살피기

• null은 'object'이다.

  const elem = document.getElementById("what-time-is-it");
  //    ^? const elem: HTMLElement | null
  if (typeof elem === "object") {
    elem;
    // ^? const elem: HTMLElement | null 🤷‍♀️
  }
  

• ""와 0은 강제 변환 시 false다.

  function maybeLogX(x?: number | string | null) {
    if (!x) {
      console.log(x);
      //          ^? (parameter) x: string | number | null | undefined 🤷‍♀️
    }
  }
  

Things to Remember

• Understand how TypeScript narrows types based on conditionals and other types of control flow.
  • 분기문 외에도 다른 종류의 제어 흐름을 살펴보며, 타입스크립트가 타입을 좁히는 과정을 이해하자
• Use tagged/discriminated unions and user-defined type guards to help the process of narrowing.
  • 타입 좁히기를 돕히기 위해 태그된 유니온과, 사용자 정의 타입 가드를 사용할 수 있다.
• Think about whether code can be refactored to let TypeScript follow along more easily.
  • 타입스크립트가 알기 쉬운 코드로 리팩토링하는 것을 고려

아이템 23: 한꺼번에 객체 생성하기 Create Objects All at Once

• 변수의 값은 변경o, 타입스크립트의 타입은 일반적으로 변경x
  • 객체를 생성할 때는 속성을 하나씩 추가하기 보다는, 여러 속성을 포함하여 한꺼번에 생성해야 타입 추론에 유리합니다

const pt = {}; // 변수의 타입이 {} 기준으로 추론됩니다.
//    ^? const pt: {}
pt.x = 3;
// ~ Property 'x' does not exist on type '{}'
//  존재하지 않는 속성을 추가할 수 없습니다
pt.y = 4;
// ~ Property 'y' does not exist on type '{}'

// interface
interface Point {
  x: number;
  y: number;
}
const pt: Point = {}; // 속성이 없다!
// ~~ Type '{}' is missing the following properties from type 'Point': x, y
pt.x = 3;
pt.y = 4;

// 해결A: 한 번에 객체 생성하기
const pt: Point = {
  x: 3,
  y: 4, // 한 번에 정의하기!
};

// 해결B: 단언
const pt = {} as Point;
//    ^? const pt: Point
pt.x = 3;
pt.y = 4; // OK

객체 전개 연산자 (spread) 사용하기

• 필드 단위의 객체 생성 가능
  • 객체에 속성을 추가하고, 타입스크립트가 새로운 타입을 추론할 수 있게 하는 방법

const pt0 = {};
const pt1 = { ...pt0, x: 3 };
const pt: Point = { ...pt1, y: 4 }; // OK

• 조건부 속성을 추가하기 예시
  • {} 또는 null로 객체 전개를 사용한다

declare let hasMiddle: boolean;
const firstLast = { first: "Harry", last: "Truman" };
const president = { ...firstLast, ...(hasMiddle ? { middle: "S" } : {}) };
//    ^? const president: {
//         middle?: string; // 선택적 속성으로 추론됨!
//         first: string;
//         last: string;
//       }
// or: const president = {...firstLast, ...(hasMiddle && {middle: 'S'})};

• 전개 연산자로 여러 속성을 추가하기

function addOptional<T extends object, U extends object>(
  a: T,
  b: U | null
): T & Partial<U> {
  return { ...a, ...b };
}

Things to Remember

• Prefer to build objects all at once rather than piecemeal.
  • 속성을 제각각 추가하지 말고, 한번에 객체로 만들기
• Use multiple objects and object spread syntax ({...a, ...b}) to add properties in a type-safe way.
  • 여러 오브젝트를 스프레드 문법을 사용해서 안전한 타입으로 추가할 수 있다
• Know how to conditionally add properties to an object.
  • 객체에 조건부로 속성 추가하는 법 알아두기 (옵셔널 속성)