답변.

타입스크립트에서 배열은 두 가지 주요 방법으로 설명됩니다: 타입[] 및 Array<타입>. 서로 다른 타입의 요소를 가진 배열의 경우, 결합 타입(union types) 또는 튜플(tuples)을 사용하여 서로 다른 타입과 개수의 고정된 요소 집합을 설명할 수 있습니다.

배열 선언:

let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ['a', 'b', 'c'];

서로 다른 타입의 요소를 가진 배열:

let mixed: (string | number)[] = [1, 'a', 2];

튜플:

let tuple: [string, number, boolean] = ['hello', 42, true];

튜플은 고정된 구조가 예상될 때(예: 함수에서 서로 다른 타입의 값을 즉시 여러 개 반환할 때) 작업하기 더 편리하고, 배열은 요소의 수와 타입이 섞이거나 미리 알 수 없을 때 사용됩니다.

트릭 질문.

튜플을 정의한 후 N 길이의 튜플에 push를 통해 요소를 추가할 수 있나요? 이로 인해 타입화에 어떤 영향을 미치나요?

답변: 네, 튜플에 push 할 수 있습니다 — 컴파일러는 이를 허용하지만 튜플의 길이에 대한 제한을 위반하는 것입니다. 새로운 요소의 타입은 튜플의 모든 가능한 타입의 결합으로 변환됩니다:

let tuple: [number, string] = [42, 'foo'];
tuple.push(true); // OK! 이제 tuple: [number, string, boolean], 하지만 타입은 업데이트되지 않았고 오류가 없습니다!
console.log(tuple); // [42, 'foo', true]

따라서 튜플 작업 및 가변성을 수동으로 제어하거나 읽기 전용으로 만들어야 합니다.

주제의 미세한 차이로 인한 실제 오류의 예.

이야기

개발자가 [number, string] 튜플을 반환하는 함수를 설명했지만, 이후 결과에 push를 통해 요소를 추가하기 시작했습니다. 이로 인해 타입이 불일치하게 되었고, 후속 코드는 특정 타입의 정확히 두 개의 요소를 기대했지만 가변 길이 배열을 받게 되어, 값 언팩과 존재하지 않는 인덱스에서 읽기 시 런타임 오류가 발생했습니다.

이야기

서로 다른 타입의 값을 저장하기 위해 any[] 배열을 사용했으며, 이를 범용 솔루션으로 간주했습니다. 결과적으로 타입스크립트는 타입의 정확성을 검사하지 않게 되었고, 타입 변환 문제로 인해 애플리케이션의 논리가 "파손"되었습니다.

이야기

프로젝트에서 배열은 타입[] 또는 Array<타입>을 통해 설명되었지만, 일부에서는 let arr: any[]를 사용하여 "소프트웨어와 함께 작업할 수 있도록" 허용했습니다. 이로 인해 제어되지 않는 변환이 발생하고, 함수는 모든 배열을 수용하게 되어 서로 다른 타입의 요소에 대해 잘못된 메소드를 호출할 때 런타임 오류가 발생했습니다.