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

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

---

아이템 26: 타입 추론에 문맥이 어떻게 사용되는지 이해하기 Understand How Context Is Used in Type Inference

타입 추론 Type Inference

• 타입을 추론할 때 => 값 뿐만 아니라, 값이 존재하는 곳의 문맥까지 살핀다

변수 선언에 리터럴 타입 vs 기본형 타입 => 두 가지 해결 방법

type Language = "JavaScript" | "TypeScript" | "Python";
function setLanguage(language: Language) {} // 문자열 리터럴 타입의 유니온으로 타입 특정

setLanguage("JavaScript"); // ✅

let language = "JavaScript"; // 타입 선언 시, language의 타입은? string!
setLanguage(language); // ❌
//          ~~~~~~~~ Argument of type 'string' is not assignable
//                   to parameter of type 'Language'

1. 타입 선언에서 변수의 가능한 값을 제한한다.

• 타이핑 오류도 방지할 수 있음

let language: Language = "JavaScript";
setLanguage(language); // ✅

2. const 키워드를 사용한다

• 타입 체커에게 값이 변경되지 않음을 알려준다. => 정확한 타입인 문자열 리터럴로 추론할 수 있다.

const language = "JavaScript"; // "JavaScript"
setLanguage(language); // ✅

튜플 사용 시

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

panTo([10, 20]);

const loc = [10, 20];
// const로 선언했지만, number[]로 추론되었다
panTo(loc);
//    ~~~ Argument of type 'number[]' is not assignable to
//        parameter of type '[number, number]'

1. 타입 선언을 제공

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

2. 상수 문맥을 제공

• as const를 사용하여 타입 체커에게 깊은 상수임을 알리고, 타입 시그니처에 readonly를 추가할 수 있다.
  • 만약 타입 시그니처를 수정할 수 없는 경우라면 타입 구문을 사용해야 합니다.

const shallowLoc = [10, 20]; // 얕은 상수
const deeplyLoc = [10, 20] as const; // 깊은 상수
//    ^? const loc: readonly [10, 20]
panTo(loc);
//    ~~~ The type 'readonly [10, 20]' is 'readonly'
//        and cannot be assigned to the mutable type '[number, number]'

// 타입 시그니처에 readonly를 추가할 수 있다
function panTo(where: readonly [number, number]) {
  /* ... */
}
const loc = [10, 20] as const;
panTo(loc); // OK

• 단점: 타입 정의 오류가 호출되는 곳에서 발생함

const loc = [10, 20, 30] as const; // 타입 정의 오류 위치
panTo(loc); // 타입 에러 발생 위치
//    ~~~ Argument of type 'readonly [10, 20, 30]' is not assignable to
//        parameter of type 'readonly [number, number]'
//          Source has 3 element(s) but target allows only 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);
//       ~~ Argument of type '{ language: string; organization: string; }'
//            is not assignable to parameter of type 'GovernedLanguage'
//          Types of property 'language' are incompatible
//            Type 'string' is not assignable to type 'Language'

// 타입 선언 추가
const ts: Language = {
  language: "TypeScript",
  organization: "Microsoft",
};

// 상수 단언 사용
const ts = {
  language: "TypeScript",
  organization: "Microsoft",
} as const;

콜백 사용 시 주의점

• 콜백 함수를 다른 함수로 전달할 때, 콜백의 매개변수 타입을 추론하기 위해 문맥을 사용한다

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

callWithRandomNumbers((a, b) => {
  // 콜백 함수를 추론할 수 있음!
  //                   ^? (parameter) a: number
  console.log(a + b);
  //              ^? (parameter) b: number
});

• 그런데 콜백을 상수로 뽑아내면? 문맥이 소실된다
  • 매개 변수에 타입 구문 추가하기
  • 가능한 경우, 전체 함수 표현식에 타입 선언 적용

Things to Remember

• Be aware of how context is used in type inference.
  • 타입 추론에서 문맥이 어떻게 쓰이는 지 주의해서 살펴보기
• If factoring out a variable introduces a type error, maybe add a type annotation.
  • 변수를 뽑아서 선언했을 때 오류가 발생한다면? 타입 선언을 추가하기
• If the variable is truly a constant, use a const assertion (as const). But be aware that this may result in errors surfacing at use, rather than definition.
  • 변수가 정말로 상수라면 상수 단언 사용하기
  • 상수 단언을 사용하면 정의한 곳이 아니라, 사용한 곳에서 오류가 발생하므로 주의하기
• Prefer inlining values where it's practical to reduce the need for type annotations.
  • 타입 선언을 줄이기 위해서, 인라인화를 하자. (값을 변수에 할당할 때, 가능한 한 값을 직접 할당하여 타입스크립트가 자동으로 타입을 추론하도록 하기)

아이템 27: 함수형 기법과 라이브러리로 타입 흐름 유지하기 Use Functional Constructs and Libraries to Help Types Flow

import _ from "lodash";
const rows = rawRows
  .slice(1)
  .map((rowStr) => _.zipObject(headers, rowStr.split(",")));

• 타입스크립트에서는 서드파티 라이브러리를 사용할 때, 타입 정보를 참고하기 때문에 자바스크립트보다 큰 이점이 있다. (시간 단축)
• 데이터의 가공이 정교할수록 장점이 분명

예시

interface BasketballPlayer {
  name: string;
  team: string;
  salary: number;
}
declare const rosters: { [team: string]: BasketballPlayer[] };
// 어딘가에 rosters가 있음!

// 타입 선언 & concat
let allPlayers: BasketballPlayer[] = []; // 변수를 선언할 때, 타입 선언 필요 (noImplicitAny)
for (const players of Object.values(rosters)) {
  allPlayers = allPlayers.concat(players); // roster를 BasketballPlayer[]로 변경 중
}

// 평탄화 flatten
// 간결하고 타입 구문도 필요없음
const allPlayersFlat = Object.values(rosters).flat();

// Loadash
const bestPaid = _(allPlayers) // 1. allPlayers 배열을 로대시 체인으로 래핑합니다.
  .groupBy((player) => player.team) // 2. 선수들을 팀별로 그룹화합니다.
  .mapValues((players) => _.maxBy(players, (p) => p.salary)!) // 3. 각 팀에서 가장 높은 연봉을 받는 선수를 찾습니다.
  .values() // 4. 객체의 값을 배열로 변환합니다.
  .sortBy((p) => -p.salary) // 5. 연봉을 기준으로 내림차순으로 정렬합니다.
  .value(); // 6. 로대시 체인을 해제하고 최종 결과를 배열로 반환합니다.

• 내장된 함수형 기법들과 Loadsh 라이브러리 (타입 정보가 잘 유지됨)
• 함수 호출 시, 전달된 매개변수 값을 건드리지 않고 새로운 값 반환 (체인)
  • 새로운 타입으로 안전하게 반환
• 타입스크립트는 자바스크립트의 동작을 정확히 모델링하려 한다.
  • 라이브러리의 타입 정보가 잘 유지되는 점을 활용하자

Things to Remember

• Use built-in functional constructs and those in utility libraries like Lodash instead of hand-rolled constructs to improve type flow, increase legibility, and reduce the need for explicit type annotations.
• 내장된 함수형 기법과 유틸리티 라이브러리를 쓰자
  • 1. 타입 흐름을 개선
  • 2. 가독성 높이기
  • 3. 명시적 타입 구문의 필요성 줄이기

---

// english
zipping 취합
munging 가공

타입 개선 예시

// 런타임에 userId is null 오류 발생!
export const loadUserProfile = (queryClient: QueryClient) => async () => {
  const userId = localStorage.getItem("userId");

  const preloadUserProfile = await queryClient.ensureQueryData(
    getUserProfile(userId || "")
  );
  // eslint-disable-next-line
  // return type 단언때문에 eslint disable 사용했습니다
  let groupProfile: AxiosResponse<any, any> | null = null;

  const groupId = preloadUserProfile.data.group;
  if (groupId) {
    groupProfile = await queryClient.ensureQueryData(
      getGroupProfile(preloadUserProfile.data.organizationId, groupId)
    );
  }

  return { preloadUserProfile, groupProfile };
};

// 타입 개선
export const loadUserProfile = (queryClient: QueryClient) => async () => {
  const userId = localStorage.getItem("userId");
  if (!userId) {
    logout();
    throw new Error("userId is not found in localStorage");
  }

  const preloadUserProfile = await queryClient.ensureQueryData(
    getUserProfile(userId)
  );
  let preloadGroupProfile = null;

  const groupId = preloadUserProfile.data.group;
  if (groupId) {
    preloadGroupProfile = await queryClient.ensureQueryData(
      getGroupProfile(preloadUserProfile.data.organizationId, groupId)
    );
  }

  return { preloadUserProfile, preloadGroupProfile };
};

• 에러 위치

  const getUserProfile = async (userId: string) => {
    if (!userId) return Promise.reject("userId is null");
    return await api.get(`users/${userId}`);
  };
  

• 컴포넌트단 예외 추가

  export default function MyPage() {
    const { preloadUserProfile, preloadGroupProfile } = useLoaderData();
    if (!preloadUserProfile.data.id) logoutWithError();
  
    const {
      data: { data: userProfile },
    } = useQuery({
      ...getUserProfile(preloadUserProfile.data.id || ""),
      initialData: preloadUserProfile,
    });
    if (!userProfile.data.id) logoutWithError();
  }