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

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

---

아이템 32: 유니온의 인터페이스보다는 인터페이스의 유니온을 사용하기 Prefer Unions of Interfaces to Interfaces with Unions

Unions of Interfaces & Interfaces with Unions

• 유니온 타입의 속성을 가지는 인터페이스
• 인터페이스의 유니온 타입

// 🤔
// 유니온의 인터페이스 Unions of Interfaces
interface User {
  id: string;
  name: string;
  contact: string | number;
}

const user1: User = {
  id: "1",
  name: "Alice",
  contact: "123-456-7890",
};
const user2: User = {
  id: "2",
  name: "Bob",
  contact: 9876543210,
};

// 👍
// 인터페이스의 유니온 Interfaces with Unions
// 타입 가드를 할 수 있다!
interface Cat {
  type: "cat";
  purrs: boolean;
}

interface Dog {
  type: "dog";
  barks: boolean;
}

type Animal = Cat | Dog;

const animal1: Animal = {
  type: "cat",
  purrs: true,
};

const animal2: Animal = {
  type: "dog",
  barks: true,
};

교재의 예시

• 유니온의 인터페이스: 라이브러리에서 오류가 발생하기 쉽고, 인터페이스를 다루기 어렵다
• 분리된 인터페이스를 유니온: 잘못된 조합으로 섞이는 것을 방지
  • 태그 사용!
  • 런타임에 타입의 범위를 좁힐 수 있다 / 타입 가드

// 🤔
interface Layer {
  layout: FillLayout | LineLayout | PointLayout;
  paint: FillPaint | LinePaint | PointPaint;
}

// 👍
interface FillLayer {
  layout: FillLayout;
  paint: FillPaint;
}
interface LineLayer {
  layout: LineLayout;
  paint: LinePaint;
}
interface PointLayer {
  layout: PointLayout;
  paint: PointPaint;
}
type Layer = FillLayer | LineLayer | PointLayer;

태그된 유니온 패턴

• 유용한 경우
  • 인터페이스의 속성이 유니온인 경우
  • 여러 개의 선택적 필드가 동시에 값이 있거나, 동시에 undefined인 경우
• 장점
  • 타입의 속성들 간 관계를 모델링
  • 타입스크립트가 코드의 정확성을 체크하는 데 도움이 된다

// 👎
interface Person {
  name: string;
  // 타입에 대한 주석은 좋지 않다
  // These will either both be present or not be present
  placeOfBirth?: string; // placeOfBirth와 dateOfBirth의 관계가 표현되지 않았다
  dateOfBirth?: Date;
}
// 👍
interface Person {
  name: string;
  birth?: {
    place: string; // place와 date는 함께 존재한다
    date: Date;
  };
}

function eulogize(person: Person) {
  console.log(person.name);
  const { birth } = person;
  if (birth) {
    // Person 매개변수에서 birth만 체크하면 된다
    console.log(`was born on ${birth.date} in ${birth.place}.`);
  }
}

✨ 타입의 구조를 손 댈 수 없는 예시: API 결과

• 인터페이스를 유니온한 타입으로 관계를 표현할 수 있다!~!

interface Name {
  name: string;
}

interface PersonWithBirth extends Name {
  // 확장된 interface
  placeOfBirth: string;
  dateOfBirth: Date;
}

type Person = Name | PersonWithBirth; // interface 유니온

// ❗️ 이렇게 쓸 수 있다!
function eulogize(person: Person) {
  if ("placeOfBirth" in person) {
    // 태그된 유니온 체크
    person;
    // ^? (parameter) person: PersonWithBirth
    const { dateOfBirth } = person; // 정상
    //     ^? const dateOfBirth: Date
  } else {
    // else라면 Name이다.
    // placeOfBirth와 dateOfBirth을 둘 다 가지고 있지 않은 인터페이스
  }
}

Things to Remember

• Interfaces with multiple properties that are union types are often a mistake because they obscure the relationships between these properties.
  • 유니온 타입의 속성을 여러 개 가지는 인터페이스는 속성 간의 관계가 분명하지 않다.
• Unions of interfaces are more precise and can be understood by TypeScript.
  • 유니온의 인터페이스보다, 인터페이스의 유니온이 더 정확하고 타입스크립트가 이해하기 좋다
• Use tagged unions to facilitate control flow analysis. Because they are so well supported, this pattern is ubiquitous in TypeScript code.
  • 타입스크립트가 제어 흐름을 분석할 수 있도록, 태그를 넣는 것을 고려한다.
  • 태그된 유니온 패턴은 자주 쓰임
• Consider whether multiple optional properties could be grouped to more accurately model your data.
  • 옵셔널 속성이 많으면? 그룹을 지어서 모델링하는 것을 고려하기