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

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

---

타입스크립트

아이템 19: 추론 가능 타입을 사용해 장황한 코드 방지하기 Avoid Cluttering Your Code with Inferable Types

타입 추론

• 모든 변수에 타입 선언하는 것은 비생산적 / 불필요

// not good!
let x: number = 12;

// enough!
let x = 12;

• 타입 추론이 된다면 명시적 타입 구문은 필요하지 않음 (오히려 방해)
• 복잡한 객체 또는 함수의 반환 타입도 추론할 수 있음

// 객체 추론
const person = {
  name: "Sojourner Truth",
  born: {
    where: "Swartekill, NY",
    when: "c.1797",
  },
  died: {
    where: "Battle Creek, MI",
    when: "Nov. 26, 1883",
  },
};
// {
//   name: string;
//   born: {
//     where: string;
//     when: string;
//   };
//   died: {
//     where: string;
//     when: string;
//   }
// }

// 함수의 반환 타입 추론
function square(nums: number[]) {
  return nums.map((x) => x * x);
}
const squares = square([1, 2, 3, 4]);
//    ^? const squares: number[]

• 유닛 타입 추론 (보다 정확한 타입 추론을 통해 타입 오류 방지!)

  

• 구조분해 할당(비구조화 할당)을 통해 지역 변수의 타입이 추론되도록 하자. (명시적 타입 선언X)

function logProduct(product: Product) {
  const id: number = product.id;
  // ~~ Type 'string' is not assignable to type 'number'
  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);
}

매개변수 타입 명시

• 타입스크립트는 매개변수의 최종 사용처까지 고려하지 않는다

  • 변수의 타입은 처음 등장할 때 결정된다
  • 함수/메서드 시그니처에 타입 구문을 포함하고, 함수 내의 지역 변수에는 타입 구문을 넣지 않기 (읽는 사람이 구현 로직에 집중할 수 있음)

• 매개변수 기본값이 있는 경우, 타입을 추론한다

  function parseNumber(str: string, base = 10) {
    //                              ^? (parameter) base: number
    // ...
  }
  

타입 정보가 있는 라이브러리

• 타입 지원하는 라이브러리에서 콜백 함수의 매개변수 타입은 자동으로 추론된다(보통)

  // Don't do this:
  app.get("/health", (request: express.Request, response: express.Response) => {
    response.send("OK");
  });
  
  // Do this:
  app.get("/health", (request, response) => {
    //                ^? (parameter) request: Request<...>
    response.send("OK");
    // ^? (parameter) response: Response<...>
  });
  

• 예시

  import _ from "lodash";
  
  interface FoodItem {
    icon: string;
    category: string;
    price: number;
  }
  
  const foodItems: FoodItem[] = [
    { icon: "🍔", category: "Fast Food", price: 5000 },
    { icon: "🍕", category: "Fast Food", price: 8000 },
    { icon: "🍣", category: "Japanese", price: 12000 },
    { icon: "🍜", category: "Japanese", price: 10000 },
    { icon: "🍝", category: "Italian", price: 15000 },
    { icon: "🥗", category: "Healthy", price: 9000 },
  ];
  
  // Lodash의 groupBy를 사용할 때 콜백 함수의 매개변수 타입이 자동으로 추론됨
  const groupedByCategory = _.groupBy(foodItems, (item) => item.category);
  
  console.log(groupedByCategory);
  

타입을 명시하고 싶은 경우: 객체 리터럴 정의

• 정의에 타입을 명시하면, excess property check(추가 속성 체크, 잉여 속성 체크)가 동작한다
  • 선택적 속성이 있는 타입의 오타 등의 오류
  • 변수가 사용되는 순간이 아닌 할당하는 시점에 오류를 표시

const elmo: Product = {
  name: "Tickle Me Elmo",
  id: "048188 627152",
  price: 28.99,
};

타입을 명시하고 싶은 경우: 함수 반환값

• 타입 추론이 가능할지라도, 구현상의 오류가 함수를 호출한 곳까지 영향을 미치지 않기 위해 타입 구문을 명시할 수 있다.
  • 아래 Promise 예시 참고 (실제로는 async/await을 효과적으로 사용하기, 아이템 25)

const cache: { [ticker: string]: number } = {};
function getQuote(ticker: string) {
  if (ticker in cache) {
    return cache[ticker]; // 구현 오류: Promise를 반환해야 한다!
  }
  return fetch(`https://quotes.example.com/?q=${ticker}`)
    .then((response) => response.json())
    .then((quote) => {
      cache[ticker] = quote;
      return quote as number;
    });
}

// 함수를 호출한 곳에서 에러가 발생한다
getQuote("MSFT").then(considerBuying);
//               ~~~~ Property 'then' does not exist on type
//                    'number | Promise<number>'

// 의도된 반환 타입을 명시하여 => 에러가 발생한 위치를 정확히 표기하기
const cache: { [ticker: string]: number } = {};
function getQuote(ticker: string): Promise<number> {
  if (ticker in cache) {
    return cache[ticker];
    // ~~~ Type 'number' is not assignable to type 'Promise<number>'
  }
  // ...
}

• 장점

  1. 오류의 위치를 제대로 표시한다
  2. 함수 시그니처를 더욱 명확하게 한다 (입/출력 타입 명시)
  3. 명명된 타입 사용하기

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

Things to Remember

• Avoid writing type annotations when TypeScript can infer the same type.
  • 타입스크립트가 타입을 추론할 수 있다면, 타입 구문 작성하지 않기
• Ideal TypeScript code has type annotations in function/method signatures but not on local variables in their bodies.
  • 함수/메서드 시그니처에 타입 구문을 작성하고, 내부 지역 변수에는 작성하지 말자.
• Consider using explicit annotations for object literals to enable excess property checking and ensure errors are reported close to where they occur.
  • 객체 리터럴과 함수 반환에는 타입 명시를 고려하자.
  • 추가/잉여 속성 체크 & 에러가 발생한 위치에 표시되도록 하기
• Don't annotate function return types unless the function has multiple returns, is part of a public API, or you want it to return a named type.
  • 공개된 API 함수이거나, 명명된 타입이 필요한 경우를 제외하고 리턴 타입은 명시하지 않아도 될 것
    • 아마도 컨벤션에 따를 것 같다