📄 Item16 ~ 18

Item16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기

• Array에 대한 타입 선언(lib.es5.d.ts에서 확인 가능)

interface Array<T> {
  // ...
  [n: number]: T;
}

• 런타임에는 ECMAScript 표준이 서술하는 것처럼 문자열 키로 인식하므로 이 코드는 완전히 가상이라고 할 수 있지만, 타입 체크 시점에 오류를 잡을 수 있어 유용하다.

const xs = [1, 2, 3];
const x0 = xs[0]; // 정상
const x1 = xs['1']; // 인덱스 식이 'number' 형식이 아니므로 요소에 암시적으로 'any' 형식이 있습니다.

function get<T>(array: T[], k: string): T {
  return array[k]; // 인덱스 식이 'number' 형식이 아니므로 요소에 암시적으로 'any' 형식이 있습니다.
}

• 한편 Object.keys 같은 구문은 여전히 문자열로 반환된다.
  • string 이 number에 할당될 수 없기 때문에 아래 코드의 마지막 줄이 동작하는 것이 이상하게 보일 것이다.
  • 자바스크립트에서는 흔한 일이지만, 이 예제가 배열을 순회하기에 좋은 방법은 아니다.

const keys = Object.keys(xs); // 타입이 string[]

for (const key in xs) {
  key; // 타입이 string
  const x = xs[key]; // 타입이 number
}

• 인덱스에 신경 쓰지 않는다면, for~of를 사용하는 게 더 좋다.

for (const x of xs) {
  x; // 타입이 number
}

• 만약 인덱스의 타입이 중요하다면, number 타입을 제공해 줄 Array.prototype.forEach를 사용하면 된다.

xs.forEach((x, i) => {
  i; // 타입이 number
  x; // 타입이 number
})

• 루프 중간에 멈춰야 한다면, C 스타일인 for(;;) 루프를 사용하는 것이 좋다.

for (let i = 0; i < xs.length; i++) {
  const x = xs[i];
  if (x < 0) break;
}

• 인덱스 시그니처가 number로 표현되어 있다면 입력한 값이 number여야 한다는 것을 의미하지만(for~in 루프는 확실히 제외), 실제 런타임에 사용되는 키는 string 타입이다.
  • number를 인덱스 타입으로 사용하면 숫자 속성이 어떤 특별한 의미를 지닌다는 오해를 불러 일으킬 수 있다.
• 어떤 길이를 가지는 배열과 비슷한 형태의 튜플을 사용하고 싶다면 타입스크립트에 있는 ArrayLike 타입을 사용한다.

function checkedAccess<T>(xs: ArrayLike<T>, i: number): T {
  if (i < xs.length) {
    return xs[i];
  }
    
  throw new Error(`배열의 끝을 지나서 ${i}를 접근하려고 했습니다.`);
}

💡 결론!

• 배열은 객체이므로 키는 숫자가 아니라 문자열이다.
  • 인덱스 시그니처로 사용된 number 타입은 버그를 잡기 위한 순수 타입스크립트 코드이다.
• 인덱스 시그니처에 number를 사용하기보다 Array나 튜플, 또는 ArrayLike 타입을 사용하는 것이 좋다.

Item17. 변경 관련된 오류 방지를 위해 readonly 사용하기

• number 타입을 담은 배열을 예시로 생각해보자.
  • number[]는 readonly number[]보다 기능이 많으므로 readonly number[]의 서브타입이 된다.
  • 따라서 변경 가능한 배열을 readonly 배열에 할당할 수 있고 그 반대는 불가능하다.

const a: number[] = [1, 2, 3];
const b: readonly number[] = a;
const c: number[] = b; // 'readonly number[]' 타입은 'readonly'이므로 변경 가능한 'number[]' 타입에 할당될 수 없습니다.

• 매개변수를 readonly로 선언하면 생기는 일
  • 타입스크립트는 매개변수가 함수 내에서 변경이 일어나는지 체크한다.
  • 호출하는 쪽에서는 함수가 매개변수를 변경하지 않는다는 보장을 받게 된다.
  • 호출하는 쪽에서 함수에 readonly 배열을 매개변수로 넣을 수도 있다.
• 만약 함수가 매개변수를 수정하지 않는다면 readonly로 선언하는 것이 좋다.
  • readonly 매개변수는 인터페이스를 명확하게 하며, 매개변수가 변경되는 것을 방지한다.
• readonly를 사용하면 변경하면서 발생하는 오류를 방지할 수 있고, 변경이 발생하는 코드도 쉽게 찾을 수 있다.

---

⭐️ const와 readonly의 차이

function parseTaggedText(lines: string[]): string[][] {
  const paragraph: string[][] = [];
  const currPara: string[] = [];
    
  const addParagraph = () => {
    if (currPara.length) {
      paragraphs.push(currPara);
      currPara.length = 0; // 배열을 비움
    }
  };
    
  for (const line of lines) {
    if (!line) {
      addParagraph();
    } else {
      currPara.push(line);
    }
  }
    
  addParagraph();
  return paragraphs;
}

• 위 코드를 실행하면 [[], [], []]와 같은 잘못된 결과가 출력된다.
• 배열을 비우는 코드 부분이 문제인데 이 때 currPara를 readonly로 선언하여 오류를 방지할 수 있다.

function parseTaggedText(lines: string[]): string[][] {
  const paragraph: string[][] = [];
  // 선언부를 let을 바꾸고 readonly를 추가함으로써 한쪽의 변경 가능성을 또 다른 쪽으로 옮긴 것이다.
  // currPara 변수는 가리키는 배열을 자유롭게 변경할 수 있지만, 그 배열 자체는 변경하지 못하게 된다.
  let currPara: readonly string[] = [];
    
  const addParagraph = () => {
    if (currPara.length) {
      paragraphs.push(currPara);
      currPara = []; // 배열을 비움
    }
  };
    
  for (const line of lines) {
    if (!line) {
      addParagraph();
    } else {
      currPara = currPara.concat([line]); // push와 달리 concat은 원본을 수정하지 않고 새 배열을 반환함
    }
  }
    
  addParagraph();
  return paragraphs;
}

• 하지만 여전히 parargraphs에 대한 오류는 남아 있다. 해결 방법은 총 세 가지 이다.

  • currPara의 복사본을 만드는 방법
    • currPara는 readonly로 유지되지만, 복사본은 원하는 대로 변경이 가능하므로 오류는 사라진다.

  paragraphs.push([...currPara]);
  

  • paragraphs(그리고 함수의 반환 타입)를 readonly string[]의 배열로 변경하는 방법

  const paragraphs: (readonly string[])[] = [];
  

  • 배열의 readonly 속성을 제거하기 위한 단언문을 쓰는 방법

  paragraphs.push(currPara as string[]);
  

• readonly는 얕게 동작한다는 것에 유의해야 한다.

  • 만약 객체의 readonly 배열이 있다면, 그 객체 자체는 readonly가 아니다.

const dates: readonly Date[] = [new Date()];
dates.push(new Date()); // ~~~ 'readonly Date[]' 형식에 'push' 속성이 없습니다.
dates[0].setFullYear(2037); // 정상

• 비슷한 경우로 Readonly 제네릭이 있다.

interface Outer {
  inner: {
    x: number;
  }
}

const o: Readonly<Outer> = { inner: { x: 0 } };
o.inner = { x: 1 }; // ~~~ 읽기 전용 속성이기 때문에 'inner'에 할당할 수 없습니다/
o.inner.x = 1; // 정상

• 중요한 점은 readonly 접근제어자는 inner에 적용되는 것이지 x는 아니라는 것이다.

  • 현재 시점에는 깊은 readonly 타입이 기본으로 지원되지 않지만, 제네릭을 만들면 깊은 readonly 타입을 사용할 수 있다.
  • 그러나 제네릭을 만드는 것은 까다롭기 때문에 ts-essentials에 있는 DeepReadonly 제네릭을 사용하면 된다.

• 인덱스 시그니처에도 readonly를 써서 읽기는 허용하되 쓰기를 방지할 수 있다.

let obj: { readonly [k: string]: number } = {};
// 또는 Readonly<{[k: string]: number}>
obj.hi = 45; // ~~ 형식의 인덱스 시그니처는 읽기만 허용됩니다.
obj = {...obj, hi: 12}; // 정상
obj = {...obj, bye: 345}; // 정상

---

Item18. 매핑된 타입을 사용하여 값을 동기화하기

interface ScatterProps {
  // The Data
  xs: number[];
  ys: number[];
    
  // Display
  xRange: [number, number];
  yRange: [number, number];
    
  // Events
  onClick: (x: number, y: number, index: number) => void;
}

const REQUIRES_UPDATE: {[k in keyof ScatterProps]: boolean} = {
  xs: true,
  ys: true,
  xRange: true,
  yRange: true,
  color: true,
  onClick: false,
};

function shouldUpdate(
  oldProps: ScatterProps,
  newProps: ScatterProps
) {
  let k: keyof ScatterProps;
      
  for (k in oldProps) {
    if (oldProps[k] !== newProps[k] && REQUIRES_UPDATE[K]) {
      return true;
    }
  }
      
  return false;
}

• [k in keyof ScatterProps]은 타입 체커에게 REQUIRES_UPDATE가 ScatterProps과 동일한 속성을 가져야 한다는 정보를 제공한다.
• 나중에 ScatterProps에 새로운 속성을 추가하는 경우 다음 코드와 같은 형태가 될 것이고 REQUIRES_UPDATE의 정의에 오류가 발생한다.

interface ScatterProps {
  // ...
  onDoubleClick: () => void;
}

const REQUIRES_UPDATE: {[k in keyof ScatterProps]: boolean} = {
  // ~~~ 'onDoubleClick' 속성이 타입에 없습니다.
}

• 만약 배열을 사용했다면 다음과 같은 코드가 된다.

const PROPS_REQUIRING_UPDATE: (keyof ScatterProps)[] = [
  'xs',
  'ys',
  // ...
];

• 매핑된 타입은 한 객체가 또 다른 객체와 정확히 같은 속성을 가지게 할 때 이상적이다.
• 매핑된 타입을 사용해서 관련된 값과 타입을 동기화하도록 한다.
• 인터페이스에 새로운 속성을 추가할 때, 선택을 강제하도록 매핑된 타입을 고려해야 한다.