TypeScript에서 배열과 튜플의 엄격한 타입 지정은 어떻게 구현되며, 왜 사용됩니까? 둘의 차이점과 사용 시 주의사항은 무엇입니까?

답변

TypeScript에서는 배열을 type[] 또는 Array<type> 형식으로 요소의 타입을 지정하여 엄격하게 타입을 지정할 수 있습니다. 예:

let arr: number[] = [1, 2, 3];

튜플은 고정된 길이와 각 요소의 타입이 있는 배열입니다:

let tuple: [string, number] = ["age", 30];

• 배열: 동일한 타입의 요소를 원하는 만큼 포함할 수 있습니다.
• 튜플: 타입의 수와 순서를 엄격하게 고정합니다. 레코드와 유사한 구조를 만들거나 함수에서 다양한 타입의 값을 반환할 수 있게 해줍니다.

주의사항:

• 배열 메소드(예: push, pop)를 튜플에 사용할 경우 push는 비록 금지되지 않지만, 결과는 보장된 타입을 넘어서게 됩니다.
• 튜플을 무분별하게 확장하면 "안전하지 않은" 코드가 발생할 수 있습니다.
• 함수에서 튜플의 구조 분해 할당시 잘못된 타입이나 길이는 오류를 초래합니다.

함정 질문

TypeScript에서 튜플이 가변 길이의 요소를 포함할 수 있는가, 그렇게 될 경우 타입 지정에 어떤 영향을 미칠 것인가?

답변: 네, 튜플은 ... 문법을 사용하여 나머지 요소를 포함할 수 있지만, 나머지 요소는 여전히 엄격한 타입 지정을 요구합니다:

let tuple: [string, ...number[]] = ["id", 10, 20, 30];

하지만 ... 이전의 요소는 반드시 지정되어야 하며, 나머지 배열의 타입은 단일해야 합니다.

주제에 대한 세부사항을 알지 못해 발생한 실제 오류 사례

---

사례

e-commerce 프로젝트에서 개발자는 push를 사용하여 튜플 [string, number]에 두 개 이상의 요소를 저장하려 했습니다. 컴파일 단계에서 오류는 발생하지 않았으나, 정확히 두 개의 요소를 기대하던 함수가 작동을 멈추어 주문 처리 시 오류가 발생했습니다.

---

사례

함수가 튜플 [string, number]을 반환했으나, 소비자는 문자열 배열을 기대했습니다. 타입 불일치는 추적하기 어려운 오류를 발생시켜, 잘못된 값이 프로덕션으로 출시되었습니다.

---

사례

JavaScript에서 TypeScript로 코드를 마이그레이션할 때 여러 다른 타입의 값을 반환하기 위해 배열을 튜플 대신 사용했습니다. 이는 엄격한 타입 지정을 위반하게 되어, 값의 순서와 타입에 의존하던 후속 코드에서 버그가 발생했습니다.