📄 Item24 ~ 28

Item24. 일관성 있는 별칭 사용하기

• 별칭은 타입스크립트가 타입을 좁히는 것을 방해한다.
  • 별칭을 남발해서 사용하면 제어 흐름을 분석하기 어렵다.
  • 따라서 변수에 별칭을 사용할 때는 일관되게 사용해야 한다.

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

const loc = borough.location;

loc[0] = 0;
console.log(borough.location); // [0, -73.979]

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

interface BoundingBox {
  x: [number, number];
  y: [number, number];
}

interface Polygon {
  exterior: Coordinate[];
  holes: Coordinates[][];
  bbox?: BoundingBox;
}

// before
function isPointInPolygon(polygon: Polygon, pt: Coordinate) {
  if (polygon.bbox) {
    if (pt.x < polygon.bbox.x[0] || pt.x > polygon.bbox.x[1] || pt.y < polygon.bbox.y[0] || pt.y > polygon.bbox.y[1]) {
      return false;
    }
  }
}

// after - 타입 오류 발생(strictNullChecks 활성화 상태)
function isPointInPolygon(polygon: Polygon, pt: Coordinate) {
  const box = polygon.bbox; // 타입이 BoundingBox | undefined
  if (polygon.bbox) {
    if (pt.x < box.x[0] || pt.x > box.x[1] || pt.y < box.y[0] || pt.y > box.y[1]) {
      return false;
    }
  }
}

// 위와 같은 상황이 발생한 이유는 속성 체크는 polygon.bbox의 타입을 정제했지만 box는 그렇지 않았기 때문이다.
// 이러한 오류는 "별칭을 일관성 있게 사용한다"는 기본 원칙을 지키면 방지할 수 있다.

function isPointInPolygon(polygon: Polygon, pt: Coordinate) {
  const box = polygon.bbox; // 타입이 BoundingBox | undefined
  if (box) {
    if (pt.x < box.x[0] || pt.x > box.x[1] || pt.y < box.y[0] || pt.y > box.y[1]) {
      return false;
    }
  }
}

• 위와 같은 코드는 객체 비구조화를 이용하면 보다 간결한 문법으로 일관된 이름을 사용할 수 있다.

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 < y[0] || pt.y > y[1]) {
      return false;
    }
  }
}

• 객체 비구조화 이용시 주의사항
  • 전체 bbox 속성이 아니라 x, y가 선택적 속성일 경우 속성 체크가 더 필요하다.
    • 따라서 타입의 경계에 null 값을 추가하는 것이 좋다.
  • bbox에는 선택적 속성이 적합했지만 holes는 그렇지 않다.
    • holes가 선택적이라면, 값이 없거나 빈 배열이었을 것이다.
    • 차이가 없는데 이름을 구별한 것이다.
    • 빈 배열은 'holes 없음'을 나타내는 좋은 방법이다.

• 별칭은 타입 체커뿐만 아니라 런타임에도 혼동을 야기할 수 있다.

const { bbox } = polygon;
if (!bbox) {
  calculatePolygonBbox(polygon); // polygon.bbox가 채워진다.
  // 이제 polygon.bbox와 bbox는 다른 값을 참조한다.
}

• 타입스크립트의 제어 흐름 분석은 지역 변수에는 꽤 잘 동작한다. 그러나 객체 속성에서는 주의해야 한다.

function fn(p: Polygon) { /* ... */ }

polygon.bbox // 타입이 BoundingBox | undefined

if (polygon.bbox) {
  polygon.bbox // 타입이 BoundingBox
  fn(polygon);
  polygon.bbox // 타입이 BoundingBox
}

• fn(polygon); 호출은 polygon.bbox를 제거할 가능성이 있으므로 타입을 BoundingBox | undefined 로 되돌리는 것이 안전할 것이다.
  • 그러나 함수를 호출할 때마다 속성 체크를 반복해야 하기 때문에 좋지않다.
  • 함수 호출이 객체 속성의 타입 정제를 무효화할 수 있다는 점을 주의해야 한다. 속성보다 지역 변수를 사용하면 타입 정제를 믿을 수 있다.
  • polygon.bbox로 사용하는 대신 bbox 지역 변수로 뽑아내서 사용하면 bbox 타입은 정확히 유지되만, polygon.bbox의 값과 같게 유지되지 않을 수 있다.

Item25. 비동기 코드에는 콜백 대신 async 함수 사용하기

• 콜백보다는 프로미스나 async/await를 사용해야 하는 이유
  • 콜백보다는 프로미스가 코드를 작성하기 쉽다.
  • 콜백보다는 프로미스가 타입을 추론하기 쉽다.

---

• 예시1) 병렬로 페이지 로드

async function fetchPages() {
  const [response1, response2, response3] = await Promise.all([
    fetch(url1), fetch(url2), fetch(url3)
  ]);
}

• 예시2) Promise.race로 타임아웃 추가하는 방법
  • Promise.race의 반환 타입은 입력 타입들의 유니온이고, 이번 경우는 Promise<Response | never>가 되나 never와의 유니온은 아무런 효과가 없으므로 Promise<Response>로 간단해진다.

function timeout(millis: number): Promise<never> {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject('timeout'), millis);
  });
}

async function fetchWithTimeout(url: string, ms: number) {
  return Promise.race([fetch(url), timeout(ms)]);
}

---

• 가끔 프로미스를 직접 생성해야할 때 콜백 API를 래핑할 경우가 있는데 선택의 여지가 있다면 일반적으로는 프로미스를 생성하기 보다는 async/await를 사용해야 한다.
  • 일반적으로 더 간결하고 직관적인 코드가 된다.
  • async 함수는 항상 프로미스를 반환하도록 강제된다.

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

const getNumber = async () => 42; // 타입이 () => Promise<number>

const getNumber = () => Promise.resolve(42); // 타입이 () => Promise<number>

• async 함수에서 프로미스를 반환하면 또 다른 프로미스로 래핑되지 않는다.
  • 반환 타입은 Promise<Promise<T>>가 아닌 Promise<T>가 된다.
  • 타입스크립트를 사용하면 타입 정보가 명확히 드러나므로 비동기 코드의 개념을 잡는 데 도움이 된다.

// function getJSON(url: string): Promise<any>
async function getJSON(url: string) {
  const response = await fetch(url);
  const jsonPromise = response.json(); // 타입이 Promise<any>
  return jsonPromise;
}

Item26. 타입 추론에 문맥이 어떻게 사용되는지 이해하기

type Language = 'JavaScript' | 'TypeScript' | 'Python';
function setLanguage(language: Language) { /* ... */ }

// 인라인 형태
setLanguage('JavaScript'); // 정상

// 참조 형태
let language = 'JavaScript';
setLanguage(language); // 'string' 형식의 인수는 'Language' 형식의 매개변수에 할당될 수 없습니다.

• 위 코드에서 인라인 형태에서 타입스크립트는 함수 선언을 통해 매개변수가 Language 타입이어야 한다는 것을 알고 있다.
  • 해당 타입에 문자열 리터럴 'JavaScript'는 할당 가능하므로 정상이다.
  • 그러나 이 값을 변수로 분리해내면, 타입스크립트는 할당 시점에 타입을 추론한다.
• 위와 같은 문제 해결 방법으로 두 가지가 있다.
• 첫 번째 해법은 타입 선언에서 language의 가능한 값을 제한하는 것이다.

let language: Language = 'JavaScript';
setLanguage(language);

• 두 번째 해법은 language를 상수로 만드는 것이다.

const language = 'JavaScript';
setLanguage(language);

• 위와 같은 과정에서 사용되는 문맥으로부터 값을 분리했다.
  • 문맥과 값을 분리하면 추후에 근본적인 문제를 발생시킬 수 있다.
  • 이제부터 이러한 문맥의 소실로 인해 오류가 발생하는 몇 가지 경우와, 이를 해결하는 방법을 살펴보자.

⭐️ 튜플 사용 시 주의점

function panTo(where: [number, number]) { /* ... */ }

panTo([10, 20]); // 정상

const loc = [10, 20];
panTo(loc); // 'number[]' 형식의 인수는 '[number, number]' 형식의 매개변수에 할당될 수 없습니다.

• 타입 선언을 제공하는 방법

const loc: [number, number] = [10, 20];
panTo(loc);

• '상수 문맥' 제공하는 방법
  • const : 단지 값이 가리키는 참조가 변하지 않는 얕은 상수
  • as const : 그 값이 내부까지 상수라는 사실을 타입스크립트에게 알림

const loc = [10, 20] as const;
panTo(loc); // ~~~ 'readonly [10, 20]' 형식은 'readonly' 이며 변경 가능한 형식 '[number, number]'에 할당할 수 없습니다.

• 위 오류는 정확히 추론한 내용이다.
  • panTo의 타입 시그니처는 where의 내용이 불변이라고 보장하지 않는다.
  • 즉, loc 매개변수가 readonly 타입이므로 동작하지 않는다.
• 최선의 해결책 : 함수의 매개변수의 타입에 readonly 지정

function panTo(where: readonly [number, number]) { /* ... */ }

const loc = [10, 20] as const;
panTo(loc);

• as const의 단점
  • 만약 타입 정의에 실수가 있다면 (ex. 튜플에 세 번째 요소 추가) 오류는 타입 정의가 아니라 호출되는 곳에서 발생한다는 것이다.
  • 특히 여러 겹 중첩된 객체에서 오류가 발생한다면 근본적인 원인을 파악하기 어렵다.

const loc = [10, 20, 30] as const;
panTo(loc); // 'readonly [10, 20, 30]' 형식의 인수는 'readonly [number, number]' 형식의 매개변수에 할당될 수 없습니다.
            // 'length' 속성의 형식이 호환되지 않습니다.
            // '3' 형식은 '2' 형식에 할당할 수 없습니다.

⭐️ 객체 사용 시 주의점

type Language = 'JavaScript' | 'TypeScript' | 'Python';

interface GovernedLanguage {
  language: Language;
  organization: string;
}

function complain(language: GovernedLanguage) { /* ... */ }

complain({ language: 'TypeScript', organization: 'Microsoft' }); // 정상

const ts = {
  language: 'TypeScript',
  organization: 'Microsoft',
};

complain(ts); // ~~'{ language: string; organization: string; }' 형식의 인수는 'GovernedLanguage' 형식의 매개변수에 할당될 수 없습니다.
              // 'language' 속성의 형식이 호환되지 않습니다.
              // 'string' 형식은 'Language' 형식에 할당할 수 없습니다.

• ts 객체에서 language의 타입은 string으로 추론된다.
  • 이 문제는 타입 선언을 추가하거나(const ts: GovernedLanguage = ...) 상수 단언(as const)을 사용해 해결할 수 있다.

⭐️ 콜백 사용 시 주의점

function callWithRandomNumbers(fn: (n1: number, n2: number) => void) {
  fn(Math.random(), Math.random());
}

callWithRandomNumbers((a, b) => {
  a; // 타입이 number
  b; // 타입이 number
    
  console.log(a + b);
})

• callWithRandomNumbers 함수의 인자로 들어가는 콜백 함수를 상수로 뽑아내면 문맥이 소실되고 noImplicitAny 오류가 발생하게 된다.
• 이런 경우는 매개변수에 타입 구문을 추가해서 해결할 수 있다. 또는 가능할 경우 전체 함수 표현식에 타입 선언을 적용하는 것이다.

const fn = (a: number, b: number) => {
  console.log(a + b);
}

callWithRandomNumbers(fn);

Item27. 함수형 기법과 라이브러리로 타입 흐름 유지하기

• 타입 흐름을 개선하고, 가독성을 높이고, 명시적인 타입 구문의 필요성을 줄이기 위해 직접 구현하기보다는 내장된 함수형 기법과 lodash 같은 유틸리티 라이브러리를 사용하는 것이 좋다.

Item28. 유효한 상태만 표현하는 타입을 지향하기

• 효과적으로 타입을 설계하려면, 유효한 상태만 표현할 수 있는 타입을 만들어 내는 것이 가장 중요하다.
  • 유효한 상태와 무효한 상태를 둘 다 표현하는 타입은 혼란을 초래하기 쉽고 오류를 유발하게 된다.
• 유효한 상태만 표현하는 타입을 지향해야 한다.
  • 코드가 길어지거나 표현하기 어렵지만 결국은 시간을 절약하고 고통을 줄일 수 있다.

---

⭐️ [예시] 페이지 내용 로드 후 화면에 표시하는 코드

📍 before

interface State {
  pageText: string;
  isLoading: boolean;
  error?: string;
}

function renderPage(state: State) {
  if (state.error) {
    return `Error! Unable to load ${currentPage}: ${state.error}`;
  } else if (state.isLoading) {
    return `Loading ${currentPage}...`;
  }
    
  return `<h1>${currentPage}</h1>\n${state.pageText}`;
}

async function changePage(state: State, newPage: string) {
  state.isLoading = true;
    
  try {
    const response = await fetch(getUrlForPage(newPage));
      
    if (!response.ok) {
      throw new Error(`Unable to load ${newPage}: ${response.statusText}`);
    }
      
    const text = await response.text();
    state.isLoading = false;
    state.pageText = text;
  } catch (e) {
    state.error = '' + e;
  }
}

• 위 함수들은 문제점이 존재한다.
  • 상태 값의 두 가지 속성이 동시에 정보가 부족하거나(요청이 실패한 것인지 여전히 로딩 중인지 알 수 없음), 두 가지 속성이 충돌(오류이면서 동시에 로딩 중일 수 있음)할 수 있다.
  • State 타입은 isLoading이 true 이고 동시에 error 값이 존재하는 무효한 상태를 허용한다.
  • 무효한 상태가 존재하면 위 두 함수를 제대로 구현할 수 없다.

📍 after

• 네트워크 요청 과정 각각의 상태를 명시적으로 모델리하는 태그된 유니온을 사용

interface RequestPending {
  state: 'pending';
}

interface RequestError {
  state: 'error';
  error: string;
}

interface RequestSuccess {
  state: 'ok';
  pageText: string;
}

type RequestState = RequestPending | RequestError | RequestSuccess;

interface State {
  currentPage: string;
  request: { [page: string]: RequestState };
}

function renderPage(state: State) {
  const { currentPage } = state;
  const requestState = state.requests[currentPage];
  
  switch (requestState.state) {
    case 'pending':
      return `Loading ${currentPage}...`;
    case 'error':
      return `Error! Unable to load ${currentPage}: ${requestState.error}`;
    case 'ok':
      return `<h1>${currentPage}</h1>\n${state.pageText}`;
  }
}

async function changePage(state: State, newPage: string) {
  state.requests[newPage] = { state: 'pending' };
  state.currentPage = newPage;
    
  try {
    const response = await fetch(getUrlForPage(newPage));
      
    if (!response.ok) {
      throw new Error(`Unable to load ${newPage}: ${response.statusText}`);
    }
      
    const text = await response.text();
    state.requests[newPage] = { state: 'ok', pageText };
  } catch (e) {
    state.requests[newPage] = { state: 'error', error: '' + e };
  }
}

---