for문 vs for...in문 vs forEach 인덱스 타입

다음 구문은 자바스크립트에서는 값이 나올지 몰라도

 

엄격한 타입스크립트에서는 Type Error를 뱉어낸다.

 

// Typescript
const myArray = [1, 2, 3];

for(var index in myArray)
    console.log(index * 2); // TS compiler error.

 

The left-hand side of an arithmetic operation must be of type
'any', 'number', 'bigint' or an enum type.ts(2362)

 

이유는 간단하다.

 

for...in 문의 index 타입은 string이기 때문!

 

for...in문, 고전 for문, forEach문의 인덱스 타입을 정리해보았다.

 

var myArray = [1, 2, 3];

for (var idx in myArray) {
  console.log(idx, typeof idx, myArray[idx]);
}
// '0' 'string' 1
// '1' 'string' 2
// '2' 'string' 3

for (var idx = 0; idx < myArray.length; idx++) {
  console.log(idx, typeof idx, myArray[idx]);
}
// 0 'number' 1
// 1 'number' 2
// 2 'number' 3

myArray.forEach(function(val, idx) {
  console.log(idx, typeof idx, val);
});
// 0 'number' 1
// 1 'number' 2
// 2 'number' 3

 

맨 처음 예시의 해결책은 index에 Number()를 덮어씌우거나

 

index가 숫자 타입인 고전 for문이나 forEach를 사용하면 될 것 같다.