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

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

📍요약

✅배열은 객체이므로 키(배열에서는 인덱스)는 숫자가 아닌 문자열이다

✅인덱스 시그니처로 사용되는 number 타입은 버그를 잡기 위한 타입스크립트 코드이다

✅인덱스 시그니처에 number를 사용하기보다 Array나 튜플, ArrayLike 타입을 사용하는 것이 좋다

 

📍number 인덱스 시그니처

- Array 타입 선언의 일부

interface Array<T> {
  // ...
  [n: number]: T; // 숫자 키가 허용됨
}

 

📍타입스크립트는 숫자 키를 허용

자바스크립트에서는 키값으로 문자열과 심벌만 가능하다. 따라서 이외의 값이 오면 자동으로 toString 메서드가 호출되어 문자열로 변환된다.

 

⭐반면 타입스크립트는 숫자 키를 허용하며 문자열 키와 다르게 인식한다.

(런타임에는 문자열 키로 변환됨)

⭐배열을 순회할 때는 for .. in 루프 대신 for ... of 루프을 사용한다

⭐대개 for ... in 루프는 for ... of 루프 또는 for 루프 에 비해 느리다

 

📍배열같은 객체(키값으로 숫자를 갖는)를 사용하고 싶을 때는 ArrayLike를 사용한다

- length와 숫자 시그니처만 갖는 객체 (배열처럼)

const xs = [1, 2, 3];
function checkedAccess<T>(xs: ArrayLike<T>, i: number): T {
  if (i < xs.length) {
    return xs[i];
  }
  throw new Error(`Attempt to access ${i} which is past end of array.`)
}