타입스크립트[TypeScript] | 4장 연습 문제

1. TypeScript가 추론하는 함수의 타입 시그니처 부분은 무엇입니까? 매개변수, 반환 유형 또는 둘 다?

 

반환 유형을 추론한다.

함수가 콜백함수여서 TS 컨텍스트에서 추론할 수 있는 경우엔 매개변수의 유형을 추론하기도 한다.

---

2. 자바스크립트의 인수 객체는 타입에 안전한가요? 그렇지 않다면 무엇을 대신 사용할 수 있습니까?

 

안전하지 않다. 나머지 매개변수를 대신 사용할 수 있다.

function f() {
    console.log(arguments)
}

function f(...args: unknown[]) {
    console.log(args)
}

---

3. 기존 reserve 함수에 시작 날짜가 현재인 휴가를 예약하는 기능을 추가하여 구현하자.

(세 번째 호출 시그니처 추가 및 reserve 구현 갱신)

type Reservation = unknown

type Reserve = {
  (from: Date, to: Date, destination: string): Reservation
  (from: Date, destination: string): Reservation
  (destination: string): Reservation
}

let reserve: Reserve = (
  fromOrDestination: Date | string,
  toOrDestination?: Date | string,
  destination?: string
) => {
  if (
    fromOrDestination instanceof Date &&
    toOrDestination instanceof Date &&
    destination !== undefined
  ) {
    // Book a one-way trip
  } else if (
    fromOrDestination instanceof Date &&
    typeof toOrDestination === 'string'
  ) {
    // Book a round trip
  } else if (typeof fromOrDestination === 'string') {
    // Book a trip right away
  }
}

 

첫 번째 if문에선 toOrDestination instanceof Date로 조건을 판별했는데,

두 번째 if문에선 typeof toOrDestination === 'string'으로 조건을 판별하는 이유는

함수 호출 시 전달되는 인자의 타입이 다를 수 있기 때문이다.

 

첫 번째 if문에서는 toOrDestination이 Date 객체로 인자가 전달되는 경우이며,

객체의 타입은 instanceof로 확인한다.

 

두 번째 if문에서는 toOrDestination이 문자열로 인자가 전달되는 경우여서 typeof를 사용한다.

---

4. 이전 장의 call 함수의 구현을 두 번째 인자가 string이어야 정상 실행되도록 업데이트하자.

function call<T extends [unknown, string, ...unknown[]], R>(
  f: (...args: T) => R,
  ...args: T
): R {
  return f(...args)
}

function fill(length: number, value: string): string[] {
  return Array.from({length}, () => value)
}

call(fill, 10, 'a') // string[]

 

extends로 제한한 타입인 [unknown, string, ...unknown[]]은 튜플 타입이며

T 타입이 최소한 세 개의 요소를 가지는 튜플 타입이어야 함을 나타낸다.

 

첫 번째 요소는 unknown 타입이고, 두 번째 요소는 string 타입,

세 번째 요소부터는 ...unknown[]을 통해 0개 이상의 unknown 타입의 요소를 가질 수 있다는 것을 알려준다.