Effective Typescript (2)

타입스크립트에서는 함수 오버로딩(overloading)가 가능하다

• 근데 함수 오버로드를 사용하기보다 조건부 타입을 사용하는것이 더 좋다

function triple(x: number | string): number | string
function triple(x: any) { return x + x + x; } 

function triple<T extends number | string>(x: T): T
function triple(x: any) { return x + x + x; } 

• 이렇게 될 경우, 매개변수 x 에 string 이 들어와도 number 가 return 될 수 있음을 나타냄 (반대의 경우도 가능 함)

  1. 이를 해결 하기 위해서, triple 함수를 오버로딩 하여 여러가지 타입 선언으로 분리 하여 해결 해보자. (타입스크립트에서는 함수의 구현체는 하나지만, 타입 선언은 몇 개 든지 만들 수 있음.) - 유니온 타입에서 문제 발생

  
  function triple(x: number): number;
  function triple(x: string): string;
  function triple(x: any) { return x + x + x; } 
  
  // 이 경우, 유니온 타입 관련해서 문제가 발생한다.
  // 타입 스크립트는 오버로딩 타입 중에서 일치하는 타입을 찾을 때 까지 순차적으로 검색한다.
  // string 타입 의 매개변수  !== number | string 타입의 매개변수는 다르기 때문에
  // Error 발생한다.
  
  function foo(x: number | string) {
    return triple(x); // 'string|number' 형식의 인수는 'string' 형식의 매개변수에 할당 될 수 없습니다.
  }

  2. 이를 해결 하기 위해서 조건부 타입을 사용 해보자. 조건부 타입은 추가적인 오버로딩 없이 유니온 타입을 지원 하기 때문에 조건부 타입 을 사용 하는 것이 더 좋다.

  
  function triple<T extends number | string>(x: T): T extends string ? string : number;
  function triple(x: any){ return x + x +x; }

Generic 잘 쓰기

1. 타입 === 값들의 집합
2. extends 키워드는 ~의 집합 이라는 의미로 생각 하면 좋다

function getKey<K extends string>(val: any, key: K) { ... }

K는 string 타입의 부분집합이 들어 올 수 있다.

interface Point {
  x: number;
  y: number;
}

type PointKeys = keyof Point; // "x" | "y"

function sortBy<K extends keyof T, T>(vals: T[], key: K): T[] { ... };

const pointes: Point[] = [{x: 1, y: 2}, {x: 2, y: 4}];
sortBy(pointes, 'x');
sortBy(pointes, 'y');
sortBy(pointes, Math.random() > 0.5 ? 'x' : 'y');
sortBy(pointes, 'z'); // Error 발생 ("z" 형식의 인수는 "x" | "y" 형식의 매개변수에 할당 될 수 없습니다.)