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

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

---

아이템 33: string 타입보다 더 구체적인 타입 사용하기 Prefer More Precise Alternatives to String Types

불분명한 string 타입 사용

• 문자열을 남발하여 생성되었다. stringly typed.

interface Album {
  artist: string;
  title: string;
  releaseDate: string; // YYYY-MM-DD
  recordingType: string; // E.g., "live" or "studio"
  // 잘못된 값을 입력해도, 타입스크립트가 알 수 없어 오류로 드러나지 않음
}

// 개선
/** 녹음이 진행된 환경 */
type RecordingType = "studio" | "live";
// 타입을 명시적으로 정의
// 함수를 사용하는 곳에서 타입의 설명을 볼 수 있다

interface Album {
  artist: string;
  title: string;
  releaseDate: Date;
  recordingType: RecordingType;
}

1. 다른 곳으로 값이 전달되어도 쉽게 타입을 확인할 수 있다.
2. 타입의 정의하고, 주석을 붙일 수 있다
3. keyof 연산자로 객체의 속성 체크가 가능하다.

예시: 제너릭 타입을 사용하는 예시

// ❗️ any를 사용해 정밀하지 못하다.
// 반환값에 any를 사용하는 것은 매우 좋지 않다.
function pluckA(records: any[], key: string): any[] {
  return records.map((r) => r[key]);
}

// ❗️ 제너릭 타입
function pluckB<T>(records: T[], key: string): any[] {
  return records.map((r) => r[key]);
  // key는 "artist" | "title" | "releaseDate" | "recordingType" 만 유효하다.
  // 지금은 string.
  // 그렇다면?🤔
}

// Key의 타입
type K = keyof Album;
// 그러므로, 스트링을 keyof T로 바꾸면 된다.
// ❗️ keyof T
function pluckC<T>(records: T[], key: keyof T) {
  return records.map((r) => r[key]);
}
// 타입 체커를 통과하고, 반환 타입을 추론하고, 추론된 타입을 알 수 있다.
// function pluck<T>(records: T[], key: keyof T): T[keyof T][]
// T[keyof T]는? 아직 너무 넓다. (string | Date)[]

// ❗️ 두 번째 제너릭 추가하기 👍
// K extends keyof T : keyof T의 부분 집합
// keyof T의 범위에 속하는 값이다. 단일 값
function pluckD<T, K extends keyof T>(records: T[], key: K): T[K][] {
  return records.map((r) => r[key]);
}
pluckD<Album, "releaseDate">([someAlbum], "releaseDate");
// Date[]
// [Date: "2024-05-30T00:00:00.000Z"]

• pluckC: 제너릭
• pluckD: 2가지 제너릭

keyof와 K extends keyof T 살펴보기

• 타입 제네릭과 관련된 키워드와 구문

✅ keyof 키워드

• keyof T는 타입 T의 모든 키를 나타내는 타입

{
  name: string;
  age: number;
}
// keyof T는 "name" | "age"와 같은 유니언 타입

✅ K extends keyof T

• K가 keyof T의 서브타입이어야 함을 의미
• 즉, K는 T의 키들 중 하나, 또는 그 이상의 조합일 수 있다.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
// K는 T의 키들 중 하나여야 하므로, obj[key]가 유효하다.

❌ K: keyof T?

• 제네릭 타입 K가 keyof T 타입과 정확히 같음을 명시하려 함
  • K는 반드시 T의 키들 중 하나만을 가질 수 있다.
• K: keyof T는 유효하지 않습니다. 제너릭 타입을 제한할 때는 항상 extends 키워드를 사용해야 합니다. K: keyof T는 문법적으로 오류!

제네릭을 적절하게 사용하기

function pluckD<T, K extends keyof T>(records: T[], key: K): T[K][];

• 매개변수 타입이 정밀해졌기 때문에, Album의 키에 자동완성 기능을 제공합니다.
• string은 any와 비슷한 문제를 가지고 있습니다.
  • 잘못 사용하면?
    • 무효한 값을 허용, 타입 간의 관계 감춤
    • 실제 버그를 찾기 못하도록 타입 체커를 방해한다.
• 정확한 타입을 사용하면?
  • 오류를 방지하고, 코드의 가독성을 향상 시킨다.

Things to Remember

• Avoid "stringly typed" code. Prefer more appropriate types where not every string is a possibility.
  • 문자열을 남발해 선언한 코드를 피하자.
  • string은 모든 문자열을 할당할 수 있기 때문에, 구체적인 타입을 사용하는 것이 좋다~
• Prefer a union of string literal types to string if that more accurately describes the domain of a variable. You'll get stricter type checking and improve the development experience.
  • 문자열 리터럴 타입의 유니온을 사용하는 것이, 타입 체크를 더 엄격히 할 수 있고 생산성을 향상시켜 좋다(자동 완성, 오타 확인)
• Prefer keyof T to string for function parameters that are expected to be properties of an object.
  • 객체의 속성명을 => 함수 매개변수로 받을 때는?
    • string보다 keyof T를 사용하자