[TypeScript] Array Type Inference

안녕하세요 동기 여러분! 오늘은 타입스크립트가 변수의 타입을 어떻게 알아내는지 알아보고 그것을 이용해서 배열에 새로운 요소를 넣는 방법에 대해 알아봅시다.

 

Array Type Inference

타입스크립트가 변수의 타입을 알아내는 방법은 상당히 단순한데 그것은 바로 첫 번째 값의 타입으로 알아낸다는 것입니다.

 

아래의 코드를 봅시다.

let yesOrNo= [true, false, true];

위 배열의 타입은 무엇일까요? boolean[]일까요 아니면 [boolean, boolean, boolean]일까요?

이런 경우에는 항상 boolean[]이 타입으로 설정이 됩니다. 왜냐하면 튜플 형식의 타입은 따로 선언을 해주어야 하기 때문입니다.

 

boolean[]타입으로 설정이 된다는 사실을 가지고 아래와 같은 코드를 추가해서 컴파일링은 해보면

yesOrNo[3] = false;

에러 없이 인덱스 3 장소에 false가 추가됩니다.

 

---

 

튜플 배열에 요소 추가하기

let tupYesOrNo: [boolean, boolean, boolean] = [true, false, true];
tupYesOrNo[3] = false;

튜플인 배열에 false라는 요소를 추가해서 컴파일링을 하면 아래와 같이 에러가 뜹니다.

1.  첫 번째 에러는 tupYesOrNo[3]의 값이 없기 때문에 타입이 언디파인드입니다. 그래서 타입 'false'는 타입 언티파인드에 선언할 수 없다고 뜹니다. (포스팅의 제일 첫 번째 코드와 상반됩니다. boolean[]타입으로 설정된 배열 클릭 시 이동)
2. 두 번째 에러는 배열 tupYesOrNo가 불린(boolean)이 3개인 튜플이어서 인덱스 '3'의 요소가 없다고 나옵니다.

 

튜플 배열에 새로운 요소 넣기

하지만 방법을 살짝 꼬우면 추가하는 방법도 있습니다. 어제 .push를 이용해서 추가했듯이 .concat을 사용해서 추가해도 에러가 없이 추가됩니다.

let tupYesOrNo: [boolean, boolean, boolean] = [true, false, true];
tupYesOrNo.concat([true, false]);

 

---

 

오늘의 느낌

타입스크립트 대단하고 똑똑한 줄 알았는데 ㅠ ㅠ 조금 미숙한 부분도 있어서 엄청 헷갈리네요