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

자바스크립트 런타임은 모든 array, object에 대한 key 또는 index를 string으로 인식하는 특징이 있다.

추가로, 어떠한 복잡한 형태의 key도 런타임에는 string으로 변환되는 것이 특징이다.

위와 같은 상황들 때문에 자바스크립트를 사용함에 있어 혼란스러운 상황이 발생할 수 있는데, 타입스크립트는 이와 같은 문제를 줄이는데 도움을 준다. 

 

타입스크립트는 숫자 key를 허용한다. 그리고 숫자 key는 문자 key와는 다른 것으로 인식한다.

// 숫자 key를 사용하는 예시 interface Array<T>{     //...     [index: number] : T; }

런타임 시점에서는 숫자 key와 문자열 key를 서로 다르게 인식할 수는 없지만, 적어도 타입스크립트 타입 체크 시스템에서는 다르게 인식하며 오류를 미리 잡아주는데 도움을 준다.

function get_el<T>(array: T[], idx: string): T {     return array[idx]; // 에러 }

 

타입스크립트에서는 Object에 number type의 key(property)를 할당하는 것은 일반적인 모습은 아니기 때문에 이와 같은 상황에서는 Array 또는 튜플 타입을 사용하는 것이 보다 낫다.

(저자는 object내 number key는 어떤 특별한 것을 의미한다고 오해시킬 소지가 있다고 함.)

 

그리고, 유사배열 'ArrayLike'의 사용 이유는 Array 타입에서 지원하는 push나 concat과 같은 메서드들을 전혀 필요로 하지 않는 number key object(Array)를 생성하고 싶을때 사용할 수 있다.

function checkedAccess<T>(xs: ArrayLike<T>, i: number): T {     if(i < xs.length) {         return xs[i];     }     throw new Error('you try to invalid index of array'); } // ArrayLike 제네릭으로 할당한 배열은 number key만 허용하기 때문에 아래와 같은 상황에서는 에러가 발생한다. const tupleLike: ArrayLike<string> = {     '0' : 'A',     '1' : 'B',     length: 2 }