아이템 37 - 공식 명칭에는 상표 붙이기

1. 구조적 타이핑의 관점에서 살펴보기

다음과 같은 코드가 있습니다.

type Vector2D = {
  x: number;
  y: number;
};

type Vector3D = {
  x: number;
  y: number;
  z: number;
};

const calculateNorm = (p: Vector2D) => {
  return Math.sqrt(p.x * p.x + p.y * p.y);
};

Vector2D와 Vector3D 타입이 있습니다. calculateNorm 함수도 있는데요. 이 함수는 Vector2D 타입의 매개변수를 받습니다. 때문에 Vector3D 타입의 매개변수를 허용하지 않아야 합니다. 하지만 구조적 타이핑 관점에서 본다면 다음의 코드는 문제가 없습니다. 이를 해결하기 위해선 어떻게 해야 할까요?

const vector3D = { x: 1, y: 3, z: 5 };
calculateNorm(vector3D);

1-1. 공식 명칭을 사용하기

1. 구조적 타이핑의 관점에서 살펴보기 에서 살펴본 코드의 문제를 공식 명칭(nominal typing)을 사용하면 해결됩니다. 

 

공식 명칭을 타입에 사용하겠다는 것은, 타입이 아니라 값의 관점에서 명칭을 정하겠다는 것입니다.  즉, 어떤 타입에 공식 명칭을 값으로 가지는 속성을 추가하여 공식 명칭 개념을 사용할 수 있습니다. 예를 들어 '상표(brand)'가 다른 타입과 구분되는 속성이 됩니다. 저는 이런 상표가 태그된 유니온의 태그(식별자)와 같다고 생각합니다. 

 

Vector2D 타입에 상표(brand)를 붙이면 다음과 같습니다.

type Vector2D = {
  _brand: '2d';
  x: number;
  y: number;
};

그러면 이어서 Vectro2D 타입을 가지는 객체를 만들어 보겠습니다.

const generatorVector2D = (x: number, y: number): Vector2D => {
  return { x, y, _brand: '2d' };
};

const vector2D = generatorVector2D(1, 2);

Vector2D 타입의 객체를 만들기 위해선 앞으로 generatorVector2D 함수를 활용하면 됩니다. 이렇게 생성된 객체만 calculateNorm 함수를 사용할 수 있게 됐습니다.

1-2. 이렇게 사용한다면??

const vector3D = { x: 1, y: 3, z: 5, _brand: '2d' as const };
calculateNorm(vector3D);

아쉽게도 위는 구조적 타이핑으로 인해 오류가 없습니다. 이러한 악의적인 사용을 막을 순 없습니다.

 

단, 공식 명칭을 사용하면 단순한 실수를 방지할 수 있습니다.

2.  string 상표화하기

우테코에서 크루들은 자신의 과정에 따라 FE_, BN_, AN_ 와 같은 이름 컨벤션을 가집니다. 코치는 그냥 코치의 이름을 사용합니다.  런타임에서는 이러한 컨벤션을 구분하여 체크하고 쉽습니다. 하지만 타입 시스템에서는 이를 판단하기 어렵습니다. 

type FECrewName = string & { _brand: 'feCrew' };
type BNCrewName = string & { _brand: 'bnCrew' };
type ANCrewName = string & { _brand: 'anCrew' };
type CoachName = string & { _brand: 'coach' };

위와 같이 string 타입이면서 _brand 속성을 가지는 객체를 생각해 보면 이는 말이 안 됩니다. 이런 객체는 타입 시스템의 영역입니다. 이런 측면에서 본다면 태그(식별자)와는 다른 느낌입니다.(ㅎㅎ)

2-1. 이름 뒤에 이모지를 붙이고 싶어... 

이런 이름 컨벤션을 바탕으로 각 과정의 크루를 판별하는 함수는 다음과 같습니다.

const isFECrew = (name: string): name is FECrewName => {
  return name.slice(0, 2) === 'FE';
};

const isBNCrew = (name: string): name is BNCrewName => {
  return name.slice(0, 2) === 'BN';
};

const isANCrew = (name: string): name is ANCrewName => {
  return name.slice(0, 2) === 'AN';
};

판별 함수를 바탕으로 과정별 서로 다른 이모지를 붙이는 함수는 다음과 같습니다.

const addFNEmoji = (name: FECrewName) => name + '📺';

const addBNEmoji = (name: BNCrewName) => name + '💽';

const addANEmoji = (name: ANCrewName) => name + '📱';

이번엔 우테코 구성원들을 포함한 배열(외부에서 들어오는 데이터라고 생각하면 됩니다.)을 매개변수로 받고 속한 과정에 따라 이모지를 붙이는 함수입니다.

const addEmoji = (people: string[]) => {
  return people.map((name) => {
    if (isFECrew(name)) {
      return addFNEmoji(name); // name: FECrewName
    } else if (isBNCrew(name)) {
      return addBNEmoji(name); // name: BNCrewName
    } else if (isANCrew(name)) {
      return addANEmoji(name); // name: ANCrewName
    }
    return name + '🚀'; // name: string
  });
};

const feCrews = addEmoji([
  'FE_노아',
  '크론',
  'FE_포비',
  'BN_쿠마',
  '코난',
  'FE_타미',
  'FE_제로',
  'AN_루루',
]);

// [
//   'FE_노아📺',
//   '크론🚀',
//   'FE_포비📺',
//   'BN_쿠마💽',
//   '코난🚀',
//   'FE_타미📺',
//   'FE_제로📺',
//   'AN_루루📱',
// ];

2-2. 궁금점

책의 예제도 그렇고 위의 예제도 그렇고... 굳이 타입이 필요한가...? 정말 타입 시스템을 위해서 상표 기법을 사용한다면 얻는 이점은 단지 단순한 실수를 방지하는 것인지 궁금하다. 예를 들어 함수 호출을 잘못한다거나 하는..!

 

얻을 수 있는 이점을 더 알아보고 싶다.

3. 정렬되어 있나?

상표 기법은 타입 시스템 내에서 표현할 수 없는 수많은 속성들을 모델링하는 데 사용된다. 여기서 말하는 속성이란 그 타입의 특징이라고 생각하면 된다. 예를 들어 '배열이 정렬되어 있다.'라는 속성(특징)을 모델링하기 위해선 다음과 같이 사용할 수 있다.

type SortedList<T> = T[] & { _brand: 'sorted' };

배열이면서 _brand 키를 가질 순 없다. 이러한 타입 또한 타입 시스템의 영역이라고 할 수 있다.

3-1. 이진 검색 하기

이진 검색은 이미 정렬된 상태의 배열을 가지고 검색을 실시한다. 즉, 정렬이 되어 있지 않다면 이진 검색 자체가 성립이 되지 않는다. 때문에 위에서 만든 SortedList<T> 타입을 활용해야 안전성을 확보할 수 있다.

 

다음은 어떤 배열이 SortedList<T> 타입인지 판별하는 함수와 이진 검색을 하는 함수이다.

const isSorted = <T>(list: T[]): list is SortedList<T> => {
  for (let i = 1; i < list.length; i++) {
    if (list[i] < list[i - 1]) return false;
  }

  return true;
};

const binarySearch = <T>(list: SortedList<T>, item: T): boolean => {
  let low = 0;
  let high = list.length - 1;

  while (high >= low) {
    const mid = low + Math.floor((high - low) / 2);
    const v = list[mid];
    if (item === v) return true;
    [low, high] = item > v ? [mid + 1, high] : [low, mid - 1];
  }

  return false;
};

binarySearch 함수는 SortedList<T> 타입을 매개변수로 받는다. 때문이 isSorted 함수를 통과한 배열만이 이진 검색을 할 수 있다. 실제 사용은 다음과 같다.

const isContainItemInBinary = <T>(list: T[], item: T) => {
  if (!isSorted(list)) return false; // list: T[]

  return binarySearch(list, item); // list: SortedList<T>
};

console.log(isContainItemInBinary([1, 2, 3, 4, 5], 3)); // true
console.log(isContainItemInBinary([1, 2, 3, 4, 5], 8)); // false
console.log(isContainItemInBinary([1, 2, 3, 4, 6, 5], 3)); // false

4. number 타입에 상표 붙이기

마지막으로 number 타입에 상표를 붙여보도록 하겠습니다. 같은 숫자여도 단위에 따라 그 숫자의 크기가 달라질 수 있습니다. 

type Meters = number & { _brand: 'meters' };
type Kilometers = number & { _brand: 'kilometers' };

const meters = (number: number) => number as Meters;
const kilometers = (number: number) => number as Kilometers;

const distance1 = meters(100); // distance1: Meters
const distance2 = kilometers(100); // distance2: Kilometers

distance1, distance2 모두 같은 100입니다. 하지만 타입이 다릅니다. 이렇게 여러 단위가 사용되는 경우 숫자의 단위에 따라 다른 상표를 붙여 문서화할 수 있습니다.

 

하지만 산술 연산을 하게 된다면 상표가 없어진 number 타입으로 바뀌게 됩니다. 때문에 실제로 사용하기에는 무리가 있습니다.