📄 Item19 ~ 23

Item19. 추론 가능한 타입을 사용해 장황한 코드 방지하기

(1) 타입 추론 장점

• 타입스크립트를 처음 접한 개발자가 자바스크립트 코드를 포팅할 때 가장 먼저 하는 일은 타입 구문을 넣는 것이다.
  • 모든 변수를 선언할 때마다 타입을 명시해야 한다고 생각하지만 타입스크립트의 많은 타입 구문은 사실 불필요하다.
  • 타입이 추론이 된다면 명시적 타입 구문은 필요하지 않는다.

let x: number = 12;
let x = 12; // 해당 코드를 마우스를 올리면 타입이 number로 이미 추론됨

• 타입 추론되면 리팩토링 역시 용이해진다.

interface Product {
  id: string;
  name: string;
  price: number;
}

function logProduct(product: Product) {
  const id: number = product.id; // 만약 이와 같이 작성하면 타입 오류가 발생할 것이다.
  const name: string = product.name;
  const price: number = product.price;
  console.log(id, name, price);
}

• 참고로 위 코드 보다는 비구조화 할당문을 사용하는 것이 더 좋다.

function logProduct(product: Product) {
  const { id, name, price } = product;
  console.log(id, name, price);
}

(2) 무조건 모든 변수에 타입을 정의하지 말자

• 타입스크립트는 최종 사용처까지 고려하여 타입을 추론하지 않는다.

  • 타입스크립트에서 변수의 타입은 일반적으로 처음 등장할 때 결정된다.

• 이상적인 타입스크립트 코드는 함수/메서드 시그니처에 타입 구문을 포함하지만, 함수 내에서 생성된 지역 변수에는 타입 구문을 넣지 않는다.

  • 타입 구문을 생략하여 방해되는 것들을 최소화하고 코드를 읽는 사람이 구현 로직에 집중할 수 있게 하는 것이 좋다.

• 보통 타입 정보가 있는 라이브러리에서, 콜백 함수의 매개변수 타입은 자동으로 추론된다.

// Don't!
app.get('/health', (request: express.Request, response: express.Response) => {
  response.send('OK');
})

// Do!
app.get('/health', (request, response) => {
  response.send('OK');
})

(3) 객체 리터럴 정의할 때 타입 추론

• 타입이 추론될 수 있음에도 여전히 타입을 명시하고 싶은 상황이 존재한다. 객체 리터럴을 정의할 때를 살펴보자.

const elmo: Product = {
  name: 'Elmo',
  id: '12345',
  price: 28.99,
}

• 위와 같이 타입을 명시하면 잉여 속성 체크가 동작한다.
  • 잉여 속성 체크는 특히 선택적 속성이 있는 타입의 오타 같은 오류를 잡는 데 효과적이다.
  • 그리고 변수가 사용되는 순간이 아닌 할당하는 시점에 오류가 표시되도록 해준다.
• 만약 타입 구문을 제거한다면 잉여 속성 체크가 동작하지 않고, 객체를 선언한 곳이 아니라 객체가 사용되는 곳에서 타입 오류가 발생한다.
  • 그러나 타입 구문을 제대로 명시한다면, 실제로 실수가 발생한 부분에 오류를 표시해준다.

const elmo = {
  name: 'Elmo',
  id: '12345',
  price: 28.99,
}

logProduct(elmo); // 여기서 오류 발생!

(4) 반환 타입 명시의 장점

---

⭐️ 오류 방지

• 함수의 반환에도 타입을 명시하여 오류를 방지할 수 있다.
  • 타입 추론이 가능할지라도 구현상의 오류가 함수를 호출한 곳까지 영향을 미치지 않도록 하기 위해 타입 구문을 명시하는 게 좋다.

const cache: { [ticker: string]: number } = {};

function getQuote(ticker: string) {
  if (ticker in cache) {
    return cache[ticker];
  }
    
  return fetch(`https://quotes.example.com/?q=${ticker}`)
    .then(response => response.json())
    .then(quote => {
      cache[ticker] = quote;
      return quote;
    });
}

• 위 코드에는 오류가 존재하는데 getQuote는 항상 Promise를 return하므로 if 구문에는 cache[ticker]가 아니라 Promise.resolve(cache[ticker])가 반환되도록 해야 한다.
  • 실행해보면 오류는 getQuote 내부가 아닌 getQuote를 호출하는 코드에서 발생한다.

// 함수 호출부
getQuote('MSFT').then(considerBuying);
// ~~~ 'number | Promise<any>' 형식에 'then' 속성이 없습니다.
// 'number' 형식에 'then' 속성이 없습니다.

• 이 때 의도된 반환 타입(Promise<number>)을 명시한다면, 정확한 위치에 오류가 표시된다.

const cache: { [ticker: string]: number } = {};

function getQuote(ticker: string): Promise<number> {
  if (ticker in cache) {
    return cache[ticker]; // 'number' 형식은 'Promise<number>' 형식에 할당할 수 없습니다.
  }
}

• 반환 타입을 명시하면, 구현상의 오류가 사용자 코드의 오류로 표시되지 않는다.
  • Promise와 관련된 특정 오류를 피하는 데는 async 함수가 효과적이다.

---

⭐️ 함수에 대해 더욱 명확하게 알 수 있음

• 반환 타입을 명시하려면 구현하기 전에 입력 타입과 출력 타입이 무엇인지 알아야 한다.
  • 추후에 코드가 조금 변경되어도 그 함수의 시그니처는 쉽게 바뀌지 않는다.
  • 전체 타입 시그니처를 먼저 작성하면 구현에 맞추어 주먹구구식으로 시그니처가 작성되는 것을 방지하고 원하는 모양을 얻게 된다.

---

⭐️ 명명된 타입을 사용하기 위해서

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

function add(a: Vector2D, b: Vector2D) {
  return {
    x: a.x + b.x,
    y: a.y + b.y,
  }
}

• 위와 같이 반환 타입을 명시하지 않은 경우 add 함수의 반환 타입은 { x: number; y: number; }로 추론된다.
  • 이런 경우 Vector2D와 호환되지만, 입력이 Vector2D인데 반해 출력은 Vector2D가 아니므로 사용자 입장에서 당황스러울 수 있다.
• 반환 타입을 명시하면 더욱 직관적인 표현이 된다.
  • 그리고 반환 값을 별도의 타입으로 정의하면 타입에 대한 주석을 작성할 수 있어서, 더욱 자세한 설명이 가능하다.(feat. TSDoc)
  • 추론된 반환 타입이 복잡해질수록 명명된 타입을 제공하는 이점은 커진다.
• 린터를 사용하고 있다면 eslint 규칙 중 no-inferrable-types을 사용해서 작성된 모든 타입 구문이 정말로 필요한지 확인할 수 있다.

---

Item20. 다른 타입에는 다른 변수 사용하기

• 다른 타입에는 별도의 변수를 사용하는 게 바람직한 이유
  • 서로 관련이 없는 두 개의 값을 분리한다.
  • 변수명을 더 구체적으로 지을 수 있다.
  • 타입 추론을 향상시키며, 타입 구문이 불필요해진다.
  • 타입이 좀 더 간결해진다. (ex. string | number 대신 string과 number를 사용)
  • let 대신 const로 변수를 선언하게 된다. const로 변수를 선언하면 코드가 간결해지고, 타입 체커가 타입을 추론하기에도 좋다.
• 변수의 값은 바뀔 수 있지만, 타입은 일반적으로 바뀌지 않는다.
• 혼란을 막기 위해 타입이 다른 값을 다룰 때에는 변수를 재사용하지 않도록 한다.

Item21. 타입 넓히기

(1) 타입 넓히기 과정

• 타입 넓히기 과정은 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추하는 과정이다.

interface Vector3 {
  x: number;
  y: number;
  z: number;
}

function getComponent(vector: Vector3, axis: 'x' | 'y' | 'z') {
  return vector[axis];
}

let x = 'x';
let vec = {x: 10, y: 20, z: 30};
getComponent(vec, x); // ~ 'string' 형식의 인수는 '"x" | "y" | "z"' 형식의 매개변수에 할당할 수 없습니다.

• 위 코드에서 보시다시피 getComponent 함수는 두 번째 매개변수에 "x" | "y" | "z" 타입을 기대했지만, x의 타입은 할당 시점에 넓히기가 동작해서 string으로 추론되었다.
  • string 타입은 "x" | "y" | "z" 타입에 할당이 불가능하므로 오류가 된 것이다.
• 타입스크립트가 아무리 영리하더라도 사람의 마음까지 읽을 수는 없고 추측한 답이 항상 옳을 수도 없다.

(2) 타입 넓히기 과정을 제어하기

---

⭐️ const 로 변수 선언하기

• let 대신 const로 변수를 선언하면 더 좁은 타입이 된다.
• 실제로 위 코드에서 발생한 오류를 const 로 작성하면 해결된다.

const x = 'x'; // 타입이 "x"
let vec = {x: 10, y: 20, z: 30};
getComponent(vec, x); // 정상

• 이제 x 값은 재할당될 수 없으므로 타입스크립트는 의심의 여지 없이 더 좁은 타입("x")으로 추론할 수 있다.
  • 그리고 문자열 리터럴 타입 "x"은 "x" | "y" | "z" 에 할당 가능하므로 코드가 타입 체커를 통과한다.
• 그러나 const가 만능은 아니다! 객체와 배열의 경우에는 여전히 문제가 있다.
  • 튜플 타입을 추론해야 할지, 요소들은 어떤 타입으로 추론해야 할지 알 수 없다.

const v = {
  x: 1,
};

v.x = 3;
v.x = '3';
v.y = 4;
v.name = 'JS';

• 위 코드는 자바스크립트에서 정상적으로 동작한다.
• v 값을 구체적으로 정의하면 {readonly x: 1}이다. 조금 추상적으로는 {x: number}가 되고 가장 추상적이라면 {[key: string]: number} 또는 object가 될 것이다.
• 객체의 타입스크립트의 넓히기 알고리즘은 각 요소를 let으로 할당한 것처럼 다룬다.
  • 그래서 v의 타입은 {x: number}가 된다.
  • 위 코드를 타입스크립트에서 구동하면 v.x = 3;을 제외한 나머지 구문은 모두 오류가 발생한다.
• 타입스크립트는 명확성과 유연성 사이의 균형을 유지하려고 한다.
  • 오류를 잡기 위해서는 충분히 구체적으로 타입을 추론해야 하지만, 잘못된 추론을 할 정도로 구체적으로 수행하지는 않는다.

---

(3) 타입스크립트의 기본 동작을 재정의하는 방법

---

⭐️ 명시적 타입 구문을 제공

const v: { x: 1 | 3 | 5 } = {
  x: 1,
}; // 타입이 { x: 1 | 3 | 5; }

---

⭐️ 타입 체커에 추가적인 문맥 제공

• 예를 들어, 함수의 매개변수로 값을 전달하는 과정

---

⭐️ const 단언문 사용

const v1 = {
  x: 1,
  y: 2,
}; // 타입은 { x: number; y: number; }

const v2 = {
  x: 1 as const,
  y: 2,
}; // 타입은 { x:1; y: number; }

const v3 = {
  x: 1,
  y: 2,
} as const; // 타입은 { readonly x: 1; readonly y: 2; }

• 값 뒤에 as const를 작성하면, 타입스크립트는 최대한 좁은 타입으로 추론한다.
• 이 기법은 객체 뿐만 아니라 배열에서도 적용할 수 있다.

---

• 넓히기로 인해 오류가 발생한다고 생각되면, 명시적 타입 구문 또는 const 단언문을 추가하는 것을 고려해야 한다.

Item22. 타입 좁히기

(1) 타입 좁히는 방법

• 타입 넓히기와 반대로 타입 좁히기는 넓은 타입으로부터 좁은 타입으로 진행하는 과정을 말한다.
• 가장 일반적인 예시는 null 체크이다.

const el = document.getElementById('foo'); // 타입이 HTMLElement | null;

if (el) {
  el // 타입이 HTMLElement
  el.innerHTML = 'Party Time'.blink();
} else {
  el // 타입이 null
  alert('No element #foo!');
}

• 위와 같은 조건 분기문을 통해서 타입 좁히기를 잘 해낼 수 있다.
  • 하지만 타입 별칭이 존재한다면 그러지 못할 수 있다. (추후 Item24 에서 자세히 진행)
• 이외에도 타입 좁히는 방법이 다양하게 존재한다.

// 타입 좁히는 방법(1) - 분기문에서 예외를 던지거나 함수를 반환

const el = document.getElementById('foo'); // 타입이 HTMLElement | null;

if (!el) throw new Error('Unable to find #foo')!
el; // 이제 타입은 HTMLElement
el.innerHTML = 'Party Time'.blink();

// 타입 좁히는 방법(2) - instanceof 사용

function contains(text: string, search: string | RegExp) {
  if (search instanceof RegExp) {
    search // 타입이 RegExp
    return !!search.exec(text);
  }
  search // 타입이 string
  return text.includes(search);
}

// 타입 좁히는 방법(3) - 속성 체크

interface A {
  a: number;
}

interface B {
  b: number;
}

function pickAB(ab: A | B) {
  if ('a' in ab) {
    ab // 타입이 A
  } else {
    ab // 타입이 B
  }
  ab // 타입이 A | B
}

// 타입 좁히는 방법(4) - Array.isArray 같은 일부 내장 함수로도 타입을 좁힐 수 있음

function contains(text: string, terms: string | string[]) {
  const termList = Array.isArray(terms) ? terms : [terms];
  termList // 타입이 string[]
  // ...
}

---

⚠️ 섣불리 타입을 좁혔다가 오류를 범하는 경우를 피하자!

• 자바스크립트에서 typeof null은 "object" 이므로 아래와 같은 코드로는 null 체크를 할 수 없다.

const el = document.getElementById('foo'); // 타입이 HTMLElement | null

if (typeof el === 'object') {
  el; // 타입이 HTMLElement | null
}

• 빈 문자열 ''과 0 모두 false가 되므로, 타입은 전혀 좁혀지지 않았고 x는 여전히 블록 내에서 string 또는 number가 된다.

function foo(x?: number | string | null) {
  if (!x) {
    x; // 타입이 string | number | null | undefined;
  }
}

---

(2) 태그된 유니온(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':
      e // 타입이 DownloadEvent
      break;
    case 'upload':
      e // 타입이 UploadEvent
      break;
  }
}

(3) 사용자 정의 타입 가드

function isInputElement(el: HTMLElement): el is HTMLInputElement {
  return 'value' in el;
}

function getElementContent(el: HTMLElement) {
  if (isInputElement(el)) {
    el; // 타입이 HTMLInputElement
    return el.value;
  }
  el; // 타입이 HTMLElement
  return el.textContent;
}

(4) 타입 가드를 이용한 배열과 객체에서의 타입 좁히기

• 배열에서 어떤 탐색을 수행할 때 undefined가 될 수 있는 타입을 사용할 수 있다.

const jackson5 = ['Jackie', 'Tito', 'Jermaine', 'Marlon', 'Michael'];

const members = ['Janet', 'Michael'].map(
  who => jackson5.find(n => n === who)
); // 타입이 (string | undefined)[]

• filter 함수를 사용해 undefined를 걸러 내려고 해도 잘 동작하지 않는다.

const members = ['Janet', 'Michael'].map(
  who => jackson5.find(n => n === who)
).filter(who => who !== undefined); // 타입이 (string | undefined)[]

• 이럴 때 타입 가드를 사용하면 타입을 좁힐 수 있다.

function isDefined<T>(x: T | undefined): x is T {
  return x !== undefined;
}

const members = ['Janet', 'Michael'].map(
  who => jackson5.find(n => n === who)
).filter(isDefined); // 타입이 string[]

Item23. 한꺼번에 객체 생성하기

• 객체를 생성할 때는 속성을 하나씩 추가하기보다는 여러 속성을 포함해서 한꺼번에 생성해야 타입 추론에 유리하다.

const pt = {};
pt.x = 3; // ~ '{}' 형식에 'x' 속성이 없습니다.
pt.y = 4; // ~ '{}' 형식에 'y' 속성이 없습니다.

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

// 물론 아래와 같은 경우 타입 단언문을 이용해 const pt = {} as Point;로 작성해서 해결은 할 수 있다.
const pt: Point = {}; // ~~ '{}' 형식에 'Point' 형식의 x, y 속성이 없습니다.
pt.x = 3;
pt.y = 4;

const pt = {
  x: 3,
  y: 4,
}; // 정상

• 작은 객체들을 조합해서 큰 객체를 만들어야 하는 경우에도 여러 단계를 거치지 않고 객체 전개 연산자를 사용해서 큰 객체를 한꺼번에 만들어내는 것이 좋다.
  • 객체 전개 연산자를 사용하면 타입 걱정 없이 필드 단위로 객체를 생성할 수 있다.
  • 이 방법은 간단한 객체를 만들기 위해 우회하기는 했지만, 객체에 속성을 추가하고 타입스크립트가 새로운 타입을 추론할 수 있게 해 유용하다.

• 타입에 안전한 방식으로 조건부 속성을 추가하려면, 속성을 추가하지 않는 null 또는 {}으로 객체 전개를 사용하면 된다.

declare let hasMiddle: boolean;

const firstLast = {first: 'Harry', last: 'Truman'};
const president = {...firstLast, ...(hasMiddle ? {middle: 'S'} : {})};

• 위 코드를 편집기에서 president에 마우스를 올리면 아래와 같이 타입이 추론된다.

const persident: {
  middle?: string;
  first: string;
  last: string;
}

• 전개 연산자로 한꺼번에 여러 속성을 추가할 수도 있다.

declare let hasDates: boolean;

const nameTitle = {name: 'Khufu', title: 'Pharaoh'};
const pharaoh = {
  ...nameTitle,
  ...(hasDates ? {start: -2589, end: -2566} : {})
};

pharaoh.start // 타입 오류

• 위 코드를 편집기에서 pharaoh에 마우스를 올리면 아래와 같이 타입이 추론된다.

const pharaoh: {
  start: number;
  end: number;
  name: string;
  title: string;
} | {
  name: string;
  title: string;
}

• 무언가 원치 않은 타입 형태로 추론이 되었다.
  • 이러한 경우에는 유니온을 사용하는 게 가능한 값의 집합을 더 정확히 표현할 수 있다.
  • 하지만 유니온 보다는 선택적 필드가 다루기에는 더 쉬울 수 있다.
  • 선택적 필드 방식으로 표현하려면 다음처럼 헬퍼 함수를 사용하면 된다.

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

const pharaoh = addOptional(
  nameTitle,
  (hasDates ? {start: -2589, end: -2566} : null
);
    
pharaoh.start // 정상, 타입이 number | undefined