可选与未定义：如何检查可选属性

在 TypeScript 中，如果某个属性可以从对象中省略，则该属性被认为是可选的，这意味着它可以是未定义的，也可以是根本不提供的。可选属性使用 ? 表示属性键上的后缀。确定一个属性是可选的还是显式定义为 undefined 的类型可能非常棘手。

让我们考虑以下具有五种可能组合的示例：

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

最后四个属性允许未定义，但实际上只有第二个和第五个属性是可选的。有趣的是，可选属性、requiredWithUndefine 和OptionalWithUndefine 都解析为相同的联合类型编号 |未定义。

所以，我们想要的是一个类型，对于可选和可选的WithUndefined返回 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

此实用程序类型有两个限制。第一个约束 undefined extends T[K]，检查 undefined 是否可以是 T[K] 访问的类型的一部分。它本质上询问类型 T[K] 是否可以包含 undefined。第二个约束 {} 扩展了 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;
// }

具有类型 never 的属性通常足以保证类型安全，但如果我们确实想出于风格目的而省略这些属性，我们可以将 IsOptional 移至将 true 约束扩展到方括号中。这是一个很好的小技巧，因为它将非可选属性的键设置为 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;
// }

这里是直接在浏览器中尝试的 Playground：TypeScript Playground

以上是可选与未定义：如何检查可选属性的详细内容。更多信息请关注PHP中文网其他相关文章！