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

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

---

아이템 49: 콜백에 this에 대한 타입 제공하기 Provide a Type for this in Callbacks if It's Part of Their API

• JS의 this는 다이나믹 스코프다. 동적 스코프

  • let, const는 lexical scope 변수의 유효 범위가 코드 작성 시점의 위치에 의해 결정되는 방식 (선언된 위치에 따라라 스코프 결정)

  • this는 어디에서 호출되었냐에 따라라 달라진다.

    • 인스턴스 참조하는 클래스에서 가장 많이 쓰임

      class C {
        vals = [1, 2, 3];
        logSquares() {
          for (const val of this.vals) {
            console.log(val ** 2);
          }
        }
      }
      
      const c = new C();
      c.logSquares();
      
      const c = new C();
      const method = c.logSquares; // 메소드를 외부 변수에 넣기
      method();
      
      // c.logSquares()
      // 인스턴스의 prototype의 logSquares 메소드 실행
      // this의 값을 c로 바인딩, this 참조: 인스턴스의 this는 생성된 객체의 this
      // c.logSquares를 참조하는 변수를 사용 << 함수의 this는 전역 this (strictmode에서 undefined)
      
      method.call(c); // call로 this 바인딩
      

• prototype

  class ResetButton {
    constructor() {
      // this.onClick 메서드의 컨텍스트를 현재 인스턴스로 바인딩합니다.
      this.onClick = this.onClick.bind(this);
    }
    render() {
      // makeButton 함수를 호출하여 버튼을 생성합니다.
      // 버튼의 텍스트는 'Reset'이고, 클릭 이벤트 핸들러는 this.onClick으로 설정됩니다.
      return makeButton({ text: "Reset", onClick: this.onClick });
    }
    onClick() {
      // 버튼 클릭 시 실행되는 함수입니다.
      // alert 창에 'Reset'과 현재 인스턴스를 문자열로 변환하여 표시합니다
      alert(`Reset ${this}`);
    }
  }
  

• lookup sequence

  • 프로토타입 체인 올라가기 전에 바인딩된 함수 참조

this 바인딩과 관련된 문제를 해결하기 위해 콜백함수를 화살표 함수로 사용하는 패턴

• 화살표 함수는 상위 스코프의 this를 그대로 사용하기 때문에 this 바인딩 문제를 회피할 수 있다.
• 타입스크립트는 JS의 this 바인딩을 그대로 모델링한다 => this를 사용하는 콜백함수가 있다면 고려해야함
• 라이브러리 사용자의 콜백 함수에서 this를 참조할 수 있다. 라이브러리 사용자가 콜백함수를 화살표 함수로 작성하면 타입스크립트가 에러를 잡아냄

class ResetButton {
  render() {
    return makeButton({text: 'Reset', onClick: this.onClick});
  },
  onClick=()=>{
    alert(`Reset ${this}`)
  }
}

Things to Remember

• Understand how this binding works.
  • this 바인딩 ~
• Provide a type for this in callbacks if it's part of your API.
  • API 만들 때 콜백함수의 this 타입 제공하기
• Avoid dynamic this binding in new APIs.
  • 동적 바인딩 피하기: 화살표 함수, 명시적 바인딩 bind(), 콜백 함수나 이벤트 핸들러에서 this를 참조하지 않도록 설계

아이템 50: 오버로딩 타입보다는 조건부 타입을 사용하기 Prefer Conditional Types to Overload Signatures

함수 오버로딩

• 모호하거나(유니온) 과하게 구체적(제너릭)

// ❌ 너무 모호함
declare function double(x: string | number): string | number;
const num = double(12);
//    ^? const num: string | number
const str = double("x");
//    ^? const str: string | number

// ❌ 아님
declare function double<T extends string | number>(x: T): T;
const num = double(12);
//    ^? const num: 12
const str = double("x");
//    ^? const str: "x"

• 또는 오류

declare function double(x: number): number;
declare function double(x: string): string;

function f(x: string | number) {
  return double(x);
  //            ~ Argument of type 'string | number' is not assignable
  //              to parameter of type 'string'

  // ❌ 오버로딩 타입 중에서 일치하는 타입을 찾을 때까지 순차적으로 검색하기 때문에 string | number은 일치하지 않으므로 오류

  // string | number을 number에 할당할 수 없다.
  // string | number을 string에 할당할 수 없다.
  // 할당할 수 없다
}

조건부 타입 사용하기

• 제너릭을 이렇게 사용할 수 있다!
  • 유니온에 조건부 타입을 적용하면? 조건부 타입의 유니온으로 분리된다.

function double<T extends string | number>( // T는 string | number
  x: T // x는 T
): T extends string ? string : number; // 그런데? T가 string이면 string 리턴, 아니면 number

function double(x: string | number) {
  // return x + x;
  //        ~~~~~ Operator '+' cannot be applied to types 'string | number' and 'string | number'.ts(2365)
  //              (parameter) x: string | number

  return typeof x === "string" ? x + x : x + x;
}

Things to Remember

• Prefer conditional types to overloaded type signatures. By distributing over unions, conditional types allow your declarations to support union types without additional overloads.
  • 오버로딩 타입보다 조건부 타입을 사용하는 것이 좋다. 추가적인 오버로딩 없이 유니온 타입 지원
• If the union case is implausible, consider whether your function would be clearer as two or more functions with different names.
  • 유니언 케이스가 가능성이 낮다면, 함수의 명확성을 위해 두 개 이상의 다른 이름을 가진 함수로 나누는 것 고려하기
• Consider using the single overload strategy for implementing functions declared with conditional types.
  • 단일 함수 구현하기 + 조건부 타입

아이템 51: 의존성 분리를 위해 미러 타입 사용하기 Mirror Types to Sever Dependencies

• 라이브러리 의존 타입 예시: NodeJS 환경에서 입력받을 Buffer 타입을 위해 @type/node를 devDependency로 포함한 경우
  • Buffer 타입은 NodeJS 개발자만 필요한 타입
  • NodeJS와 무관한 웹 개발자: NodeJS 필요없음
  • JS 개발자: @types 필요없음
• 사용하지 않는 모듈 => 미러링한 타입 인터페이스 만들기
  • 필요한 선언부만 추출하여 명시한다!
• 다만, 프로젝트 의존성이 다양하고 필수 의존성이 많은 경우. 타입 선언을 대부분 추출해야 한다면 명시적으로 @types 의존성을 추가하는 것이 나음
  • 유닛테스트 모킹할 때도 사용

Things to Remember

• Avoid transitive type dependencies in published npm modules.
  • 공개한 라이브러리에 전이적 타입 의존성 피하기
    • 모듈 사용자가 직접 사용하지 않는 모듈에 대한 타입 정의 설치해야함
    • 관리 & 추적해야 할 패키지 수가 늘어나고, 버전 충돌 문제 / 배포 및 업데이트 복잡해짐
• Use structural typing to sever dependencies that are nonessential.
  • 필수가 아닌 의존성은 구조적 타이핑 사용하기
• Don't force JavaScript users to depend on @types. Don't force web developers to depend on Node.js.
  • 의존성을 추가할 때, JS 개발자, Node.js 안쓰는 개발자의 경우 고려하기

아이템 52: 테스팅 타입의 함정에 주의하기 Write Tests for Your Types

• 프로젝트를 공개할 때 할 것: 테스트 코드 작성, 타입 선언 테스트
  • 함수를 실행하는 방식 => 반환 타입을 체크하는 방식
  • dtslint 또는 타입 시스템 외부에 타입을 검사하는 도구도 사용하기

DefinitelyTyped 문서 잘 되있음 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.ko.md

헬퍼 함수

• 불필요한 추가 변수를 많이 만들거나, 린팅 규칙을 비활성하지 않기 위해 사용

function assertType<T>(x: T) {}
assertType<number[]>(map(["john", "paul"], (name) => name.length)); // 이름의 길이를 배열로 반환하는 기능의 리턴 타입을 검증

assertType 헬퍼 함수의 문제점

• 할당 가능성을 체크하기 때문에 심벌도 string 또는 number에 할당 가능

const n = 12;
assertType<number>(n); // OK

• 매개변수 갯수 오류 (더 적은 매개변수를 가진 함수를 할당할 수 있음)

function assertType<T>(x: T) {}
const add = (a: number, b: number) => a + b;
assertType<(a: number, b: number) => number>(add); // OK

const double = (x: number) => 2 * x;
assertType<(a: number, b: number, c: number) => number>(double); // OK!?

개선

• 함수의 매개변수 타입과 반환타입을 분리하여 테스트: Parameters, ReturnType

const double = (x: number) => 2 * x;
declare let p: Parameters<typeof double>;
assertType<[number, number]>(p); // 매개변수 타입 테스트
//                           ~ Argument of type '[number]' is not
//                             assignable to parameter of type [number, number]
declare let r: ReturnType<typeof double>;
assertType<number>(r); // OK

this 테스트 통과하는 예시

const beatles = ["john", "paul", "george", "ringo"]; // string[]

assertType<number[]>(
  map(beatles, function (name, i, array) {
    // ~~~ Argument of type '(name: any, i: any, array: any) => any' is
    //     not assignable to parameter of type '(u: string) => any'
    // 타입스크립트는 이 콜백 함수의 타입이 올바르지 않다고 경고합니다.

    assertType<string>(name); // name은 string
    assertType<number>(i); // index는 숫자
    assertType<string[]>(array); // array는 문자열 배열
    assertType<string[]>(this); // this는 암시적 any <- 여기서 문제
    //                   ~~~~ 'this' implicitly has type 'any'
    return name.length; //각 문자열의 길이를 반환합니다.
  })
);

declare function map<U, V>(
  array: U[],
  fn: (this: U[], u: U, i: number, array: U[]) => V
): V[];
// this가 U의 배열임을 명시함

dtslint

• 모듈을 선언(declare)하면 전체 모듈에 any 타입을 할당한다.

  • 테스트는 전부 통과하지만 모든 타입 안정성을 포기.
  • 함수 호출이 암시적 any를 반환

• DefinitelyTyped의 타입 선언을 위한 도구: dtslint

  • 주석을 통해 동작한다.
  • 각 심벌의 타입을 추출하여 "글자 자체"가 같은 지 비교
    • 한계: 글자만 비교한다. string과 any, number|string과 string|number 확인 어려움

  const beatles = ["john", "paul", "george", "ringo"];
  map(
    beatles,
    function (
      name, // $ExpectType string
      i, // $ExpectType number
      array // $ExpectType string[]
    ) {
      this; // $ExpectType string[]
      return name.length;
    }
  ); // $ExpectType number
  

expectTypeOf

• 타입 일치 확인 라이브러리

import { expectTypeOf } from "expect-type";

const beatles = ["john", "paul", "george", "ringo"];
expectTypeOf(
  map(beatles, function (name, i, array) {
    expectTypeOf(name).toEqualTypeOf<string>();
    expectTypeOf(i).toEqualTypeOf<number>();
    expectTypeOf(array).toEqualTypeOf<string[]>();
    expectTypeOf(this).toEqualTypeOf<string[]>();
    return name.length;
  })
).toEqualTypeOf<number[]>();

Things to Remember

• When testing types, be aware of the difference between equality and assignability, particularly for function types.
  • 타입 테스트 시, 함수 타입에서 동일성(equality)과 assignability(할당 가능성)의 차이점 알기
• For functions that use callbacks, test the inferred types of the callback parameters. Don't forget to test the type of this if it's part of your API.
  • 콜백 파라미터의 타입 테스트. API에 this 관련 사항 있으면 테스트
• Avoid writing your own type testing code. Use one of the standard tools instead.
  • 직접 테스트 코드 작성하는 것보다 일반화된 툴 사용하기
• For code on DefinitelyTyped, use dtslint. For your own code, use vitest, expect-type, or the Type Challenges approach. If you want to test type display, use eslint-plugin-expect-type.
  • DefinitelyTyped에서는 dtslint 사용. 직접 작성하는 코드라면 도구를 사용하자.
  • 도구들: vitest, expect-type, Type Challenges 접근법, (타입 디스플레이)eslint-plugin-expect-type