[TypeScript] 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다.

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

자바스크립트에서 객체란?

• 키/값 쌍의 모음
  • 키는 보통 문자열
  • 값은 어떤 무엇이든 될 수 있다

• 파이썬, 자바에서 볼 수 있는 ‘해시 가능’ 객체 표현이 자바스크립트에는 없다.
  • toString 메서드가 호출되어 객체가 문자열로 변환되어 버린다.

> x={}
{}
> x[[1,2,3]] = 2
2
> x
{ '1,2,3': 1 }

• 숫자는 키로 사용할 수 없다.
  • 자바스크립트 런타임이 문자열로 변환해 버린다.

> { 1: 2, 3: 4 }
{ '1': 2, '3': 4 }

• 배열은 분명히 객체이다
  • 때문에 숫자 인덱스를 사용하는 것이 당연하다.

> typeof []
'object'

> x = [1, 2, 3]
[1, 2, 3]
> x[0]
1

• 앞의 인덱스들은 문자열로 변환되어 사용된다.
  • 문자열 키를 사용해도 역시 배열의 요소에 접근할 수 있다.

> x['1']
2

• Object.keys 를 이용해 배열의 키를 나열하면, 키가 문자열로 출력된다.

> Object.keys(x)
[ '0', '1', '2' ]

따라서, 이러한 혼란을 바로잡기 위해 타입스크립트는 숫자 키를 허용하고, 문자열 키와 다른 것으로 인식한다.

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

• 문자열 키로 인식하므로, 타입 체크 시점에 오류를 잡을 수 있다.
  • 실제로 동작하지 않는 코드이다.
  • 타입 시스템의 다른 것들과 마찬가지로, 타입 정보는 런타임에 제거된다.

const xs = [1, 2, 3];
const x0 = xs[0];  // OK
const x1 = xs['1'];
           // ~~~ Element implicitly has an 'any' type
           //      because index expression is not of type 'number'

function get<T>(array: T[], k: string): T {
  return array[k];
            // ~ Element implicitly has an 'any' type
            //   because index expression is not of type 'number'
}

• Object.keys 같은 구문은 여전히 문자열로 반환된다.
  • string이 number에 할당될 수 없기 때문에, 마지막 줄이 이상하게 보일 수 있다.

    ⇒ 배열을 순회하는 코드 스타일에 대한 실용적인 허용이라 생각하면 좋다 !

    ⇒ 자바스크립트에서는 흔한 일이지만, 배열을 순회하기 좋은 방법은 아니다.

const xs = [1, 2, 3];
const keys = Object.keys(xs);  // Type is string[]
for (const key in xs) {
  key;  // Type is string
  const x = xs[key];  // Type is number
}

• 인덱스에 신경 쓰지 않는다면, for-of 를 사용하는 것이 좋다.

const xs = [1, 2, 3];
for (const x of xs) {
  x;  // Type is number
}

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

const xs = [1, 2, 3];
xs.forEach((x, i) => {
  i;  // Type is number
  x;  // Type is number
});

• 루프 중간에 멈춰야 한다면, C 스타일의 for(;;) 루프가 좋다.

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

💡

타입이 불확실하다면, 대부분의 브라우저와 자바스크립트 엔진에서 for-in 루프는 for-of 또는 C 스타일의 for(;;) 루프에 비해 몇 배나 느리다.

⇒ 성능 체크 가능한지 확인

인덱스 시그니처가 number로 표현되어 있다면

• 입력한 값이 number 여야 한다는 것을 의미하지만 (for-in 루프 제외)

• 실제 런타임에 사용되는 키는 string 타입

일반적으로 string 대신 number를 타입의 인덱스 시그니처로 사용하는 경우는 많지 않다.

하지만 만약 숫자를 사용해서 인덱스 항목을 지정한다면

• Array 또는 튜플 타입을 대신 사용하게 될 것이다.

어떠한 길이를 가지는 배열과 비슷한 형태의 튜플을 사용하고 싶다면

⇒ 타입스크립트에 있는 ArrayLike 타입을 사용한다.

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.`)
}

ArrayLike 를 사용하더라도 키는 여전히 문자열

const xs = [1, 2, 3];
const tupleLike: ArrayLike<string> = {
  '0': 'A',
  '1': 'B',
  length: 2,
};  // OK

Uploaded by N2T