📄 Item29 ~ 33

Item29. 사용할 때는 너그럽게, 생성할 때는 엄격하게

• 함수의 매개변수는 타입의 범위가 넓어도 되지만, 결과를 반환할 때는 일반적으로 타입의 범위가 더 구체적이어야 한다.

---

• 예시) 3D 매핑 API - 카메라의 위치를 지정하고 경계 박스의 뷰포트를 계산

⭐️ 사용할 때는 너그럽게

declare function setCamera(camera: CameraOptions): void;
declare function viewportForBounds(bounds: LngLatBounds): CameraOptions;

• 일부 값은 건드리지 않으면서 동시에 다른 값을 설정할 수 있어야 하므로 CameraOptions의 필드는 모두 선택적이다.
• 게다가 LngLat 타입도 다양한 형테의 매개변수 타입을 정의하여 편의성을 제공하여 함수 호출을 쉽게 할 수 있다.

interface CameraOptions {
  center?: LngLat;
  zoom?: number;
  bearing?: number;
  pitch?: number;
}

type LngLat = { lgn: number; lat: number; } | { lon: number; lat: number; } | [number, number];

• 또한 viewportForBounds 함수는 위와 같은 자유로운 타입을 매개변수로 받는다.
  • LngLat 타입과 조합하면 LngLatBounds의 가능한 형태는 19가지 이상으로 매우 자유로운 타입이다.

type LngLatBounds = { northeast: LngLat, southwest: LngLat } | [LngLat, LngLat] | [number, number, number, number];

⭐️ 생성할 때는 엄격하게

function focusOndFeature(f: Feature) {
  const bounds = calculateBoundingBox(f);
  const camera = viewportForBounds(bounds);
  setCamera(camera);
  const { center: { lat, lng }, zoom } = camera;
  // ~~~ ... 형식에 'lat' 속성이 없습니다.
  // ~~~ ... 형식에 'lng' 속성이 없습니다.
  zoom; // 타입이 number | undefined
  window.location.search = `?v=@${lat},${lng}z${zoom}`;
}

• 위 오류는 lat, lng 속성이 없고 zoom 속성만 존재하여 발생했고, zoom의 타입이 number | undefined로 추론되는 것도 역시 문제다.

• 근본적인 문제는 viewportForBounds의 타입 선언이 사용될 때뿐만 아니라 만들어질 때도 너무 자유롭다는 것이다.

• camera 값을 안전한 타입으로 사용하는 유일한 방법은 유니온 타입의 각 요소별로 코드를 분기하는 것이다.

• 유니온 타입의 요소별 분기를 위한 방법은 좌표를 위한 기본 형식을 구분하는 것이다.

  • 배열과 배열 같은 것의 구분을 위해 LngLat와 LngLatLike를 구분할 수 있다.
  • 또한 setCamera 함수가 매개변수로 받을 수 있도록, 완전하게 정의된 Camera 타입과 Camera 타입이 부분적으로 정의된 버전을 구분할 수도 있다.

interface LngLat {
  lng: number;
  lat: number;
}

type LngLatLike = LngLat | { lon: number; lat: number; } | [number, number];

interface Camera {
  center: LngLat;
  zoom: number;
  bearing: number;
  pitch: number;
}

interface CameraOptions extends Omit<Partial<Camera>, 'center'> {
  center?: LngLatLike;
}

type LngLatBounds = { northeast: LngLatLike, southwest: LngLatLike } | [LngLatLike, LngLatLike] | [number, number, number, number];

declare function setCamera(camera: CameraOptions): void;
declare function viewportForBounds(bounds: LngLatBounds): Camera;

Item30. 문서에 타입 정보를 쓰지 않기

• 타입스크립트의 타입 구문 시스템은 간결하고, 구체적이며, 쉽게 읽을 수 있도록 설계되어있다.
  • 함수의 입력과 출력의 타입을 코드로 표현하는 것이 주석보다 더 나은 방법이라는 것은 자명하다.
• 누군가 강제하지 않는 이상 주석ㅇ은 코드와 동기화되지 않는다.
  • 주석 대신 타입 정보를 작성한다면 코드가 변경된다 하더라도 정보가 정확히 동기화된다.
• 특정 매개변수를 설명하고 싶다면 JSDoc의 @param 구문을 사용하면 된다.
• 값을 변경하지 않는다고 설명하는 주석도 좋지 않다.
  • 또한 매개변수르 변경하지 않는다는 주석도 사용하지 않는 것이 좋다.
  • 그 대신, readonly로 선언하여 타입스크립트가 규칙을 강제할 수 있게 하면 된다.
• 변수명에 타입 정보를 넣지 않도록 한다.
  • 예를 들어 변수명 ageNum으로 하는 것보다는 age로 하고, 그 타입이 number임을 명시하는게 좋다.
  • 그러나 단위가 있는 숫자들은 예외이다. 단위가 무엇인지 확실하지 않다면 변수명 또는 속성 이름에 단위를 포함할 수 있다.

---

• 주석과 변수명에 타입 정보를 적는 것은 피해야 한다.
  • 타입 선언이 중복되는 것으로 끝나면 다행이지만 최악의 경우는 타입 정보에 모순이 발생하게 된다.
• 타입이 명확하지 않은 경우는 변수명에 단위 정보를 포함하는 것을 고려하는 것이 좋다. (예를 드러 timeMs 또는 temperatureC)

---

Item31. 타입 주변에 null 값 배치하기

⭐️ 예시1 . 숫자들의 최솟값과 최댓값 계산

function extent(nums: number[]) {
  let result: [number, number] null = null;
  
  for (const num of nums) {
    if (!result) {
      result = [num, num];
    } else {
      result = [Math.min(num, result[0]), Math.max(num, result[1])];
    }
  }
    
  return result;
}

// 1) non-null assertion
const [min, max] = extent([0, 1, 2])!;
const span = max - min; // 정상

// 2) if 구문으로 null check
const range = extent([0, 1, 2]);

if (range) {
  const [min, max] = range;
  const span = max - min; // 정상
}

⭐️ 예시2. 사용자의 포럼 게시글을 나타내는 클래스

• 아래와 같이 init 메소드를 구성하면 null의 존재 유무에 따라 네 가지 상태가 존재하여 null 체크가 난무하고 버그를 양산하게 된다.

class UserPosts {
  user: UserInfo | null;
  posts: Post[] | null;
    
  constructor() {
    this.user = null;
    this.posts = null;
  }
    
  async init(userId: string) {
    return Promise.all([
      async () => this.users = await fetchUser(userId),
      async () => this.posts = await fetchPostsForUser(userId)
    ]);
  }
    
  getUserName() {}
}

• 필요한 데이터가 모두 준비된 후에 클래스를 만들도록 바꿔보자.

class UserPosts {
  user: UserInfo;
  posts: Post[];
    
  constructor(user: UserInfo, posts: Posts[]) {
    this.user = user;
    this.posts = posts;
  }
    
  static async init(userId: string): Promise<UserPosts> {
    const [user, posts] = await Promise.all([
      fetchUser(userId),
      fetchPostsForUser(userId)
    ]);
    
    return new UserPosts(user, posts);
  }
    
  getUserName() {
    return this.user.name;
  }
}

---

💡 결론

• 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 설계하면 안 된다.
• API 작성 시에는 반환 타입을 큰 객체로 만들고 반환 타입 전체가 null 이거나 null이 아니게 만들어야 한다.
• 클래스를 만들 때는 필요한 모든 값이 준비되었을 때 생성하여 null이 존재하지 않도록 하는 것이 좋다.
• strictNullChecks 를 설정하면 코드에 많은 오류가 표시되겠지만, null 값과 관련된 문제점을 찾아낼 수 있기 때문에 반드시 필요하다.

---

Item32. 유니온의 인터페이스보다는 인터페이스의 유니온을 사용하기

• 태그된 유니온에서 인터페이스의 유니온 패턴 적용하기

interface FillLayer {
  type: 'fill';
  layout: FillLayout;
  paint: FillPaint;
}

interface LineLayer {
  type: 'line';
  layout: LineLayout;
  paint: LinePaint;
}

type Layer = FillLayer | LineLayer;

• type 속성은 '태그' 이며 런타임에 어떤 타입의 Layer가 사용되는지 판단하는 데 쓰인다.
  • 타입스크립트는 태그를 참고하여 Layer의 타입의 범위를 좁힐 수도 있다.

function drawLayer(layer: Layer) {
  if (layer.type === 'fill') {
    const { paint } = layer; // 타입이 FillPaint
    const { layout } = layer; // 타입이 FillLayout
  } else {
    const { paint } = layer; // 타입이 LinePaint
    const { layout } = layer; // 타입이 LineLayout
  }
}

• 타입의 구조를 손 댈 수 없는 상황에서도 이 기법을 이용해서 속성 사이의 관계를 모델링할 수 있다.

interface Name {
  name: string;
}

interface PersonWithBirth extends Name {
  placeOfBirth: string;
  dateOfBirth: Date;
}

type Person = Name | PersonWithBirth;

function eulogize(p: Person) {
  if ('placeOfBirth' of p) {
    p; // 타입이 PersonWithBirth
    const { dateOfBirth } = p; // 정상, 타입이 Date
  }
}

• 또는 두 개의 옵셔널한 속성을 하나의 객체로 모아서 설계할 수도 있다.

interface Person {
  name: string;
  birth?: {
    place: string;
    date: Date;s
  }
}

Item33. string 타입보다 더 구체적인 타입 사용하기

type RecordingType = 'studio' | 'live';

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

const kindOfBlue: Album = {
  artist: 'Miles Davis',
  title: 'Kind of Blue',
  releaseDate: new Date('1959-08-17'),
  recordingType: 'Studio', // '"Studio"' 형식은 'RecordingType' 형식에 할당할 수 없습니다.
}

• string 타입보다 더 구체적인 타입을 사용했을 때의 장점
  • 타입을 명시적으로 정의함으로써 다른 곳으로 값이 전달되어도 타입 정보가 유지된다.
  • 타입을 명시적으로 정의하고 해당 타입의 의미를 설명하는 주석을 붙여 넣을 수 있다.
  • keyof 연산자로 더욱 세밀하게 객체의 속성 체크가 가능해진다.

⭐️ keyof 연산자

• 우선 예시로 underscore의 pluck 함수를 살펴보자

function pluck(records: any[], key: string): any[] {
  return records.map(r => r[key]);
}

• 타입 체크는 되나 any 타입으로 인해 정밀하지 못하다. 그래서 첫 번째 단계로 제네릭을 이용하여 타입 시그니처를 개선해보자.

function pluck<T>(records: T[], key: string): any[] {
  return records.map(r => r[key]); // ~~~ '{}' 형식에 인덱스 시그니처가 없으므로 요소에 암식적으로 'any' 형식이 있습니다.
}

• key의 타입이 string 이여서 범위가 넓다는 오류를 발생시킨다.
• 그래서 keyof 연산자를 이용해서 유효한 값을 지정해보자.

type K = keyof Album; // 타입이 "artist" | "title" | "releaseDate" | "recordingType"

// T[keyof T]는 T 객체 내의 가능한 모든 값의 타입이다.ㄴ
function pluck<T>(records: T[], key: keyof T): T[keyof T][] {
  return records.map(r => r[key]);
}

• 하지만 아래와 같은 경우 key의 값으로 하나의 문자열을 넣게 되면, 그 범위가 너무 넓어서 적절한 타입이라고 보기 어려운 경우도 있다.

const releaseDates = pluck(albums, 'releaseDate'); // 타입이 (string | Date)[]

• 범위를 더 좁히기 위해, keyof T의 부분 집합으로 두 번째 제네릭 매개변수를 도입해야 한다.

function pluck<T, K extends keyof T>(records: T[], key: K): T[K][] {
  return records.map(r => r[key]);
}

pluck(albums, 'releaseDate'); // 타입이 Date[]
pluck(albums, 'artist'); // 타입이 string[]
pluck(albums, 'recordingType'); // 타입이 RecordingType[]
pluck(albums, 'recordingDate'); // ~~~ '"recordingDate"' 형식의 인수는 ... 형식의 매개변수에 할당될 수 없습니다.

---

💡 결론

• string은 any와 비슷한 문제를 가지고 있다.
  • 따라서 잘못 사용하게 되면 무효한 값을 허용하고 타입 간의 관계도 감추어 버린다.
  • 이러한 문제점은 타입 체커를 방해하고 실제 버그를 찾지 못하게 만든다.
• 변수의 범위를 보다 정확하게 표현하고 싶다면 string 타입보다는 문자열 리터럴 타입의 유니온을 사용하면 된다.
  • 타입 체크를 더 엄격히 할 수 있고 생산성을 향상시킬 수 있다.
• 객체의 속성 이름을 함수 매개변수로 받을 때는 string 보다는 keyof T를 사용하는 것이 좋다.

---