답변.

질문 배경: JavaScript에서는 함수에서 객체의 구조 분해를 서명(Signature)에서 직접 사용하는 경우가 많습니다. TypeScript에서는 이러한 접근 방식이 구조 분해되는 매개변수의 구조를 명확하게 설명하고 기본값을 설정해야 하며, 그렇지 않으면 존재하지 않는 속성을 참조할 경우 오류가 발생하고 잘못된 타입 추론이 일어날 수 있습니다.

문제: 전체 매개변수의 타입 또는 구조 분해되는 객체의 개별 중첩 속성을 올바르게 설명하는 것이 불명확합니다. 특히 선택적 및 중첩된 필드와 기본값이 있을 경우에는 더욱 그렇습니다.

해결책: 항상 함수의 매개변수 구조에 대해 개별 타입 또는 인터페이스를 정의하고, 필수 필드와 선택적 필드를 명확히 지정하며, 기본값은 함수 본문 또는 매개변수에서 ES6 문법을 사용하여 설정하십시오.

코드 예시:

interface UserOptions {
  name: string;
  age?: number;
  address?: { city: string; zipcode?: string };
}

function registerUser(
  { name, age = 18, address = { city: 'Unknown' } }: UserOptions
): string {
  return `${name}, ${age}, ${address.city}`;
}

주요 특징:

중첩 매개변수를 구조 분해하려면 반드시 인터페이스나 타입을 사용하십시오.
필드의 기본값은 함수의 서명에서 설정하십시오.
선택적 속성 (age?, address?)의 경우 항상 이들이 누락될 수 있는 시나리오를 염두에 두십시오.

함정 질문.

타입 객체 매개변수의 설명을 생략하고 자동 타입 추론에 의존할 수 있나요?

아니요, 이는 위험할 수 있습니다. UserOptions 타입을 지정하지 않으면 컴파일러가 필수 속성에 대해 알려주지 않으며, 기본값도 중첩 필드에 대해 잡히지 않아 사용 시 불명확한 오류가 발생할 수 있습니다.

function example({ x, y }) { ... } // x와 y는 any

중첩 객체의 기본값을 설정하면서 일부 속성을 부분적으로 변경하려면 어떻게 해야 하나요?

스프레드를 사용하세요. 그러나 스프레드는 선택적 타입의 경우 타입을 "합치지" 않습니다. 따라서 검사나 기본값 제공이 필요합니다.

function fn({ obj = { foo: 1 } }: { obj?: { foo: number } }) {
  const address = { foo: 42, ...obj };
}

선택적 필드가 기본값 없이 구조 분해될 때의 위험은 무엇인가요?

선택적 속성에서 기본값을 생략하면 속성에 접근할 때(예: address.city) 런타임 오류가 발생할 수 있습니다. ?와 기본값을 명시적으로 설정하는 것이 좋습니다.

function danger({ address }: { address?: { city: string } }) {
  console.log(address.city); // 오류, address는 undefined일 수 있습니다.
}

일반적인 오류 및 안티 패턴

구조 분해되는 인수의 암묵적 타입 지정 (any)
중첩/선택적 속성의 기본값 부재
구조적 매개변수에 대한 인터페이스 및 타입 별칭 미사용

실례

부정적인 사례

구식 코드에서 매개변수 객체를 명시적 타입 없이 구조 분해하였습니다. 함수에 새 필드를 추가할 때 모든 사용처가 자동으로 찾아지지 않아 프로덕션 호출이 깨졌습니다.

장점:

빠르고 간단하게 작성

단점:

구조에 대한 보호 및 제어 부족
변경 시 취약함

긍정적인 사례

모든 함수에 대해 인터페이스를 도입하고, undefined 및 기본값이 있는 시나리오에 대한 테스트를 커버하여 컴파일러 제안 덕분에 대규모 변경을 쉽게 수행할 수 있었습니다.