DIL: 이펙티브 타입스크립트

스터디: 월간 CS, https://github.com/monthly-cs/2024-05-effective-typescript
작성일: 2024-05-23
작성자: dusunax

---

아이템 24: 일관성 있는 별칭 사용하기 Be Consistent in Your Use of Aliases

• 별칭의 값을 변경하면 원래 속성값에서도 변경된다
  • 제어 흐름을 분석하기 어렵다

const place = { name: "New York", latLng: [41.6868, -74.2692] };
const loc = place.latLng; // 별칭 alias

제어 흐름 예시, 비구조화

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;
    }
  }

  // ... more complex check
}

function isPointInPolygon(polygon: Polygon, pt: Coordinate) {
  const box = polygon.bbox; // 임시 변수 + strictNullChecks
  // box라는 별칭을 만들어서 제어 흐름 분석을 방해했다

  if (polygon.bbox) {
    box.x[0]; // 속성 체크 되지 않았음
    //~~~  'box' is possibly 'undefined'
  }

  if (box) {
    box.x[0]; // 타입 체커에 문제 없지만. box와 bbox라는 같은 값인 데 다른 이름을 사용하는 변수를 만들었다
  }

  const { bbox } = polygon; // 객체 비구조화를 사용했다.
  if (bbox) {
    const { x } = bbox; // 배열, 중첩된 구조에서도 사용한다
    // 보다 간결한 문법으로 일관된 이름 사용하기
    // 선택적 속성인 경우, 속성 체크가 더 필요. 경계에 null값 추가
  }
}

제어 흐름 분석 Control Flow Analysis

• 지역 변수에서는 O. 객체 속성에서는 주의
• 지역 변수로 뽑아서 사용하면? 변수의 타입은 유지되지만 원래 객체의 값과 같게 유지되지 않을 수 있음

const myObj = {
  value: 10,
};

let val = myObj.value;
val += 5;

console.log(`객체의 값: ${myObj.value}`); // 객체의 값: 10
console.log(`값: ${val}`); // 지역 변수의 값: 15

Things to Remember

• Aliasing can prevent TypeScript from narrowing types. If you create an alias for a variable, use it consistently.
  • 별칭은 타입스크립트가 타입을 좁히는 것을 방해하기 때문에~ 일관적인 방식으로 사용해야 함
• Be aware of how function calls can invalidate type refinements on properties. Trust refinements on local variables more than on properties.
  • 함수의 호출이 객체 속성의 타입 정제 refinements를 무효화 할 수 있다는 점을 주의
  • 속성보다 지역 변수의 타입 정제를 믿으세용

아이템 25: 비동기 코드에는 콜백 대신 async 함수 사용하기 Use async Functions Instead of Callbacks to Improve Type Flow

• 비동기 동작을 모델링 하기 위해 마주했던 콜백 지옥 😈
• ES2015의 Promise 도입 😇 (future라고 부르기도 한다?)
  • (1)코드 중첩을 줄이고, (2)실행 순서를 코드 순서와 같게 함. (3)오류 처리가 쉽고 (4)Promise.all과 같은 기법 사용할 수 있음

async function

• await 키워드는 Promise가 resolve(처리)될 때까지 해당 함수의 실행을 멈춤
• async 함수 내에서 await 중인 Promise가 reject(거절)되면 예외를 던진다
  • try/catch

async function & typescipt

• callback보다 promise를 사용할 이유
  • 코드를 작성하기 더 쉽다
  • 타입을 추론하기 더 쉽다
• Promise.all
  • awiat과 구조 분해 할당

// 프로미스
async function fetchPages() {
  // 각 response의 타입을 추론
  const [response1, response2, response3] = await Promise.all([
    fetch(url1),
    fetch(url2),
    fetch(url3),
  ]);
}

// 콜백 함수
function fetchPagesWithCallbacks() {
  let numDone = 0;
  const responses: string[] = [];
  const done = () => {
    const [response1, response2, response3] = responses;
  };
  const urls = [url1, url2, url3];
  urls.forEach((url, i) => {
    fetchURL(url, (r) => {
      responses[i] = url;
      numDone++;
      if (numDone === urls.length) done();
    });
  });
  // 코드와 타입 구문을 더 많이 써야한다
}

Promise.race

• 타임아웃을 추가한 패턴

/** 시간 내에 HTTP 요청을 완료하지 못하면 "timeout"을 timeoutMs와 함께 리턴하는 함수 */
function timeout(timeoutMs: number): Promise<never> {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject("timeout"), timeoutMs);
  });
}

// (타입) Promise<Response>로 추론된다
// Promise<Reponse | never>는??
// 공집합(never)와 유니온은 아무런 효과가 없으므로 => Promise<Response>다.
async function fetchWithTimeout(url: string, timeoutMs: number) {
  return Promise.race([fetch(url), timeout(timeoutMs)]); // 둘 중 누가 먼저 완료될 것인가?
  // url과 타임아웃 값을 받아, 지정된 시간 내 HTTP 요청을 완료하지 못하면 에러 발생
  // 만약 fetch가 먼저 완료되면? 결과 반환
  // 만약 timout이 먼저 완료되면? 'timeout' 에러 반환
}

new Promise보다 async function 사용하기

• 프로미스를 생성하기보다, async/await를 사용할 수 있다
  • async 함수는 Promise를 반환한다!

// async 화살표 함수 만들기
const getNumber = async () => 42;
//    ^? const getNumber: () => Promise<number>

// 프로미스를 직접 생성한다면
const getNumber = () => Promise.resolve(42);
//    ^? const getNumber: () => Promise<number>

• 즉시 사용가능한 값임에도 프로미스를 반환?
  • 함수는 동기 or 비동기로 실행 / 혼용하지 않기 (관리하기 헬이 된다, async () => Promise<Promise>)
  • 중복 프로미스 래핑x, 비동기 코드의 개념 잡기~

const _cache: { [url: string]: string } = {};
async function fetchWithCache(url: string) {
  if (url in _cache) {
    return _cache[url];
  }
  const response = await fetch(url); // 일관적인 동작 강제
  const text = await response.text(); // await!
  _cache[url] = text;
  return text;
}

let requestStatus: "loading" | "success" | "error";
async function getUser(userId: string) {
  requestStatus = "loading";
  const profile = await fetchWithCache(`/user/${userId}`);
  requestStatus = "success";
}

Things to Remember

• Prefer Promises to callbacks for better composability and type flow.
  • Promise가 callback보다 코드 작성과, 타입 추론 면에서 유리하다.
• Prefer async and await to raw Promises when possible. They produce more concise, straightforward code and eliminate whole classes of errors.
  • 간결하고 직관적인 코드를 작성하기 위해 직접 Promise를 사용하지 않고, async/await을 사용하자
• If a function returns a Promise, declare it async.
  • 프로미스를 반환한다면 async로 선언하기