#33 string 타입보다 더 구체적인 타입 사용하기

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리

📍요약

✅뭉뚱그려 string 타입으로 할당하는 것을 피하고 구체적인 타입을 사용하는 것이 좋다

✅변수의 범위를 보다 정확하게 표현하려면 string 타입보다는 string 리터럴 타입의 union을 사용하는 것이 좋다.

- 엄격한 타입 체크가 가능하여 생산성을 향상시킬 수 있다

✅객체의 프로퍼티 이름을 함수 매개변수로 받을 때는, string 보다 keyof T를 사용하는 것이 좋다

 

📍string 타입의 변수를 선언할 때는 더 좁은 타입을 고려해야 한다

- Date 타입을 사용할 수 있는 프로퍼티에도 string을 사용한다면 개선이 필요하다

// 리팩토링 전
// 모든 프로퍼티가 string이라서 에러를 유발할 수 있다

interface Album1 {
  artist: string;
  title: string;
  releaseDate: string;
  recordingType: string;
}

// 리팩토링 후
// string 타입 대신 union 타입과 Date 타입을 사용

/** 이 녹음은 어떤 환경에서 이뤄졌는지 */
type RecordingType = 'studio' | 'live';

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

// 이제 타입을 세밀하게 검사할 수 있다
const kindOfBlue: Album2 = {
  artist: 'Miles Davis',
  title: 'Kind of Blue',
  releaseDate: new Date('1959-08-17'),
  recordingType: 'Studio'
// ~~~~~~~~~~~~ Type '"Studio"' is not assignable to type 'RecordingType'
};

 

string 타입 대신 다른 타입을 사용하여 얻는 장점

- RecordingType 을 studio 또는 live 로 제한 가능

- 주석을 매끄럽게 사용 가능 (RecordingType 의 의미를 설명)

-  keyof 연산자를 통해 세밀하게 객체의 프로퍼티 체크가 가능

 

⭐keyof 연산자 사용 예시

type RecordingType = 'studio' | 'live';

interface Album {
  artist: string;
  title: string;
  releaseDate: Date;
  recordingType: RecordingType;
}
type K = keyof Album;
// Type is "artist" | "title" | "releaseDate" | "recordingType"

 

📍keyof 연산자로 type narrowing

- 예시

// 함수 시그니처
// any 반환 타입을 개선해야 함
function pluck1<T>(record: T[], key: string): any[] {
  return record.map(r => r[key]);
                      // ~~~~~~ Element implicitly has an 'any' type
                      //        because type '{}' has no index signature
}

// 리팩토링1
// keyof 를 사용하여 string을 대체했고,
//  any[] 반환타입을 사용하지 않아도 됨
function pluck2<T>(record: T[], key: keyof T) {
  return record.map(r => r[key]);
}

// 리팩토링2
// keyof T 가 string보다 범위가 더 좁지만,
// keyof T의 부분집합(이 예시에서는 단일 값)으로 으로 2번째 제너릭 매개변수를 도입
function pluck3<T, K extends keyof T>(record: T[], key: K): T[K][] {
  return record.map(r => r[key]);
}