아이템 21 타입 넓히기

타입스크립트가 넓히기를 통해 상수의 타입을 추론하는 법을 이해해야 한다.

지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추해야 하는 과정을 넓히기(widening) 이라 한다.

const 사용하기

let 대신 const를 사용하여 더 좁은 타입이 되도록 하자.

const x = 'x' // type is "x"  
let vec = { x: 10, y: 20, z: 30 }  
getComponent(vec, x) // OK

그러나 객체와 배열의 경우에는 여전히 문제가 남아있다. 따라서 객체의 경우 한번에 만들어야 한다. (아이템23)

책에서는 타입스크립트 기본 동작을 재정의하는 세가지 방법을 소개한다.

명시적 타입 구문을 제공하는 방법
타입 체커에 추가적인 문맥을 제공하는 방법
const 단언문을 사용하는 방법

동작에 영향을 줄 수 있는 방법인 const, 타입 구문, 문맥, as const에 익숙해져야 한다.

const 단언문과 변수 선언에 쓰이는 let, const 와 혼동하면 안된다. const 단언문은 온전히 타입 공간의 기법이다.

const v1 = {  
  x: 1,  
  y: 2,  
} // Type is { x: number; y: number; }  
  
const v2 = {  
  x: 1 as const,  
  y: 2,  
} // Type is { x: 1; y: number; }  
  
const v3 = {  
  x: 1,  
  y: 2,  
} as const // Type is { readonly x: 1; readonly y: 2; }

const 단언문을 통해 최대한 좁은 타입으로 추론한다.

또한 배열을 튜플 타입으로 추론할 때에도 as const를 사용할 수 있다.

const a1 = [1, 2, 3] // Type is number[]  
const a2 = [1, 2, 3] as const // Type is readonly [1, 2, 3]

아이템 22 타입 좁히기

분기문 외에도 여러 종류의 제어 흐름을 살펴보며 타입스크립트가 타입을 좁히는 과정을 이해해야 한다.

분기에서 예외를 던지거나 함수를 반환하여 블록의 나머지 부분에서 변수의 타입을 좁힐 수 있다.

const el = document.getElementById('foo') // Type is HTMLElement | null  
if (!el) throw new Error('Unable to find #foo')  
el // Now type is HTMLElement  
el.innerHTML = 'Party Time'.blink()

instanceof 를 사용해서 타입을 좁힐 수 있다.

function contains(text: string, search: string | RegExp) {  
  if (search instanceof RegExp) {  
    search // Type is RegExp  
    return !!search.exec(text)  
  }  search // Type is string  
  return text.includes(search)  
}

속성체크로도 타입을 좁힐 수 있다.

interface A {  
  a: number  
}  
interface B {  
  b: number  
}  
function pickAB(ab: A | B) {  
  if ('a' in ab) {  
    ab // Type is A  
  } else {  
    ab // Type is B  
  }  
  ab // Type is A | B  
}

내장함수를 통해 타입을 좁힐 수 있다.

function contains(text: string, terms: string | string[]) {  
  const termList = Array.isArray(terms) ? terms : [terms]  
  termList // Type is string[]  
  // ...}
}

태그된/구별된 유니온과 사용자 정의 타입 가드를 사용하여 타입 좁히기와 과정을 원활하게 만들 수 있다.

또 다른 방법은 '태그'를 붙이는 방법이 있다.

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':  
      e // Type is DownloadEvent  
      break  
    case 'upload':  
      e // Type is UploadEvent  
      break  
  }  
}

이 패턴은 태그된 유니온 또는 구별된 유니온 이라고 불린다. 만약 타입스크립트가 타입을 식별하지 못한다면, 식별을 돕기 위해 커스텀 함수를 도입할 수 있다.

function isInputElement(el: HTMLElement): el is HTMLInputElement {  
  return 'value' in el  
}  
  
function getElementContent(el: HTMLElement) {  
  if (isInputElement(el)) {  
    el // Type is HTMLInputElement  
    return el.value  
  }  
  el // Type is HTMLElement  
  return el.textContent  
}

이 기법은 사용자정의타입가드로 불리며, 반환 타입이 true 일 경우 타입 체커에게 매개변수의 타입을 좁힐 수 있다고 알려주는 역할을 한다.

아이템 23 한꺼번에 객체 생성하기

속성을 제각각 추가하지 말고 한꺼번에 객체로 만들어야합니다. 안전한 타입으로 속성을 추가하려면 객체 전개({...a, ...b})를 사용하면 된다.

변수의 값은 변경될 수 있지만 타입은 일반적으로 변경되지 않는다. 즉 객체를 생성할 때는 하나씩 추가하기보다는 여러 속성을 포함해서 한꺼번에 생성해야 타입 추론에 유리하다.

const pt = {}  
pt.x = 3  
// ~ Property 'x' does not exist on type '{}'  
pt.y = 4  
// ~ Property 'y' does not exist on type '{}'

interface Point {  
  x: number  
  y: number  
}  
const pt:Point = {  
  x: 3,  
  y: 4,  
} // OK

혹은 객체 전개 연산자를 통해 한꺼번에 만들어 낼 수 있다.

const pt = { x: 3, y: 4 }  
const id = { name: 'Pythagoras' }  
const namedPoint = { ...pt, ...id }  
namedPoint.name // OK, type is string

아이템 24 일관성 있는 별칭 사용하기

별칭은 타입스크립트가 타입을 좁히는 것을 방해한다. 따라서 변수에 별칭을 사용할 때는 일관되게 사용해야 한다..

const borough = { name: 'Brooklyn', location: [40.688, -73.979] }  
const loc = borough.location;

borough.location 배열에 loc 이라는 별칭(alias)을 만들었다. 별칭의 값을 변경하면 원래 속성값에서도 변경된다.

별칭을 남발해서 사용하면 제어 흐름을 분석하기 어렵다.

비구조화 문법을 사용해서 일관된 이름을 사용하는 것이 좋다.

interface Coordinate {  
  x: number  
  y: number  
}  
  
interface BoundingBox {  
  x: [number, number]  
  y: [number, number]  
}  
  
interface Polygon {  
  exterior: Coordinate[]  
  holes: Coordinate[][]  
  bbox?: BoundingBox  
}
function isPointInPolygon(polygon: Polygon, pt: Coordinate) {  
  const { bbox } = polygon  
  if (bbox) {  
    const { x, y } = bbox  
    if (pt.x < x[0] || pt.x > x[1] || pt.y < x[0] || pt.y > y[1]) {  
      return false  
    }  
  }  
  // ...  
}

구조분해할당을 통해서 일관성있는 이름을 사용하자.

아이템 25 비동기 코드에는 콜백 대신 async 함수 사용하기

콜백보다는 프로미스를 사용하는게 코드 작성과 타입 추론면에서 유리하다.

이유는 다음과 같다.

콜백보다는 프로미스가 코드를 작성하기 쉽다.
콜백보다는 프로미스가 타입을 추론하기 쉽다.

가능하면 프로미스를 생성하기보다는 async와 await를 사용하는 것이 좋다. 간결하고 직관적인 코드를 작성할 수 있고 모든 종류의 오류를 제거할 수 있다.

그러나 일반적으로는 프로미스를 생성하기보다는 async/await를 사용하자.

이유는 다음과 같다.

일반적으로 더 간결하고 직관적인 코드가 된다.
async 함수는 항상 프로미스를 반환하도록 강제된다.

// function getNumber(): Promise<number>  
async function getNumber() {  
  return 42  
}

어떤 함수가 프로미스를 반환한다면 async로 선언하는 것이 좋다.

즉시 사용 가능한 값에도 프로미스를 반환하는게 이상하게 보일 수 있지만, 실제로는 비동기 함수로 통일하도록 강제하는데 도음이 된다.

LHS_EffectiveTypescript_05 - YDP-SPLOUNGE-CLUB/typescript-study GitHub Wiki

아이템 21 타입 넓히기

const 사용하기

아이템 22 타입 좁히기

아이템 23 한꺼번에 객체 생성하기

아이템 24 일관성 있는 별칭 사용하기

아이템 25 비동기 코드에는 콜백 대신 async 함수 사용하기

⚠️ GitHub.com Fallback ⚠️

LHS_EffectiveTypescript_05 - YDP-SPLOUNGE-CLUB/typescript-study GitHub Wiki

아이템 21 타입 넓히기

const 사용하기

아이템 22 타입 좁히기

아이템 23 한꺼번에 객체 생성하기

아이템 24 일관성 있는 별칭 사용하기

아이템 25 비동기 코드에는 콜백 대신 async 함수 사용하기

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️