선택적 속성과 정의되지 않음: 선택적 속성을 확인하는 방법

TypeScript에서 속성은 객체에서 생략할 수 있는 경우 선택 사항으로 간주됩니다. 즉, 정의되지 않거나 전혀 제공되지 않을 수 있습니다. 선택적 속성은 ?를 사용하여 표시됩니다. 속성 키의 접미사. 속성이 선택 사항인지 또는 해당 유형이 정의되지 않은 상태로 명시적으로 정의되었는지 확인하는 것은 매우 까다로울 수 있습니다.

5가지 가능한 조합이 있는 다음 예를 살펴보겠습니다.

type Example = {
    required: number;
    optional?: number;
    requiredAsUndefined: undefined;
    requiredWithUndefined: number | undefined;
    optionalWithUndefined?: number | undefined;
}

마지막 네 개의 속성은 정의되지 않을 수 있지만 실제로는 두 번째와 다섯 번째 속성만 선택 사항입니다. 흥미롭게도, option, requireWithUndefine 및 optionWithUndefine 속성은 모두 동일한 공용체 유형 번호 | 정의되지 않았습니다.

그래서 우리가 원하는 것은 선택사항과 선택사항WithUndefound에 대해 true를 반환하고 나머지에 대해서는 false를 반환하는 유형입니다. 이러한 유틸리티 유형은 다음과 같습니다.

type IsOptional<T, K extends keyof T> = undefined extends T[K]
    ? ({} extends Pick<T, K> ? true : false)
    : false;

type Required = IsOptional<Example, 'required'>;  // false
type Optional = IsOptional<Example, 'optional'>;  // true
type RequiredAsUndefined = IsOptional<Example, 'requiredAsUndefined'>;  // false
type RequiredWithUndefined = IsOptional<Example, 'requiredWithUndefined'>;  // false
type OptionalWithUndefined = IsOptional<Example, 'optionalWithUndefined'>;  // true

이 유틸리티 유형에는 두 가지 제약이 있습니다. 첫 번째 제약 조건인 undefound는 T[K]를 확장하며 undefed가 T[K]에 의해 액세스되는 유형의 일부일 수 있는지 확인합니다. 이는 본질적으로 T[K] 유형에 정의되지 않은 내용이 포함될 수 있는지 여부를 묻습니다. 두 번째 제약 조건인 {}는 Pick ? true: false, 속성 K가 선택된 유형에 {} 유형(빈 객체)을 할당할 수 있는지 확인합니다. 이는 속성이 선택 사항임을 의미합니다.

이 유틸리티 유형에서 선택적 속성만 선택하는 새로운 매핑 유형을 구축할 수 있습니다. 선택사항이 아닌 속성은 never로 설정됩니다.

type OptionalProperties<T> = {
    [K in keyof T]: IsOptional<T, K> extends true 
        ? T[K] 
        : never
}

type OnlyOptionals = OptionalProperties<Example>;
// type OnlyOptionals = {
//     required: never;
//     optional?: number;
//     requiredAsUndefined: never;
//     requiredWithUndefined: never;
//     optionalWithUndefined?: number | undefined;
// }

일반적으로 유형이 있는 속성을 갖는 것만으로는 유형 안전성이 충분하지 않지만 스타일 목적으로 이러한 속성을 정말로 생략하려는 경우 IsOptional 실제 제약 조건을 대괄호로 확장합니다. 이는 선택 사항이 아닌 속성의 키를 never로 설정하고 TypeScript에서 자동으로 생략하므로 좋은 작은 트릭입니다.

type OnlyOptionals<T> = {
    [K in keyof T as IsOptional<T, K> extends true ? K : never]: T[K]
} 
type OnlyOptionals = OnlyOptionals<Example>;
// type OnlyOptionals = {
//    optional?: number;
//    optionalWithUndefined?: number | undefined;
// }

브라우저에서 직접 사용해 볼 수 있는 플레이그라운드: TypeScript 플레이그라운드

위 내용은 선택적 속성과 정의되지 않음: 선택적 속성을 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!