답변

TypeScript는 rest 매개변수 및 구조 분해를 사용하여 함수의 정확한 타입화를 지원합니다. 이는 가변 개수의 인수 또는 복잡한 객체를 받는 함수에 특히 중요합니다.

구조 분해는 함수 매개변수에서 예상 속성의 구조를 명시적으로 지정할 수 있게 해줍니다:

function printUser({ name, age }: { name: string; age: number }) {
  console.log(`${name} (${age})`);
}

Rest 매개변수는 가변 개수의 인수와 그 타입을 정의할 수 있게 해줍니다:

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

주요 객체와 추가 매개변수 배열을 받는 함수에서는 결합된 사용이 발생합니다:

function logEvent(event: { type: string }, ...meta: any[]) {
  console.log(event.type, meta.join(','));
}

올바른 타입화는 코드 실행 전에 오류를 발견할 수 있게 해주지만, 잘못된 타입화는 타입 안전성을 잃고 런타임 오류를 초래합니다.

함정 질문

기본값이 있는 구조 분해된 매개변수의 타입을 어떻게 지정하고 선택적으로 만들 수 있습니까?

많은 사람들이 객체의 타입을 지정하지만 각 필드를 선택적으로 만들거나 타입과 함께 기본값을 설정하는 것을 잊어버립니다:

function foo({x = 1, y = 2}: {x?: number; y?: number} = {}) {
  console.log(x, y);
}

여기서 기본값을 설정하고 모든 매개변수를 ?를 사용하여 선택적으로 만들었습니다. 그렇지 않으면, 매개변수 없이 호출 시 오류가 발생하지만 기본값이 예상됩니다.

주제에 대한 미세한 지식 부족으로 인한 실제 오류 사례

---

이야기

프로젝트에서 JavaScript에서 TypeScript로 매개변수가 있는 함수의 마이그레이션 시에 객체에만 타입을 지정하고 개별 필드에는 지정하지 않았습니다. 이로 인해 매개변수 없이 함수 호출이 객체 구조 분해 오류로 이어져 애플리케이션이 다운되었습니다: undefined에는 name 속성이 없습니다.

이야기

rest 매개변수와 함께 작업 중 매개변수 배열의 타입을 명시적으로 지정하는 것을 잊었습니다. 함수의 타입이 any[]로 설정되어 숫자만 전달할 수 있도록 허용되었습니다. 프로덕션에서 숫자와 문자열을 합산하여 보고서에서 잘못된 결과를 얻었습니다.

이야기

깊게 중첩된 객체와 함께 구조 분해를 사용했지만 중첩된 타입을 지정하지 않았습니다. 이로 인해 TypeScript가 "감소"하고 필수 필드가 객체에 없음을 알아차리지 못하여 클라이언트 측에서 TypeError: Cannot read property 'id' of undefined 오류가 발생했습니다.