插件窝 干货文章 可选与未定义:如何检查可选属性

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

属性 example 类型 undefined 447    来源:    2024-10-22

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

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

type example = {
    required: number;
    optional?: number;
    requiredasundefined: undefined;
    requiredwithundefined: number | undefined;
    optionalwithundefined?: number | undefined;
}

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

所以,我们想要的是一个类型,对于可选和可选的带未定义返回 true,对于其余的返回 false。以下是此类实用程序类型的外观:

type isoptional<t k extends keyof t> = undefined extends t[k]
    ? ({} extends pick<t k> ? true : false)
    : false;

type required = isoptional<example>;  // false
type optional = isoptional<example>;  // true
type requiredasundefined = isoptional<example>;  // false
type requiredwithundefined = isoptional<example>;  // false
type optionalwithundefined = isoptional<example>;  // true
</example></example></example></example></example></t></t>

此实用程序类型有两个限制。第一个约束 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;
// }
</example></t></t>

拥有类型为 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;
// }
</example></t></t>

这里是直接在浏览器中尝试的 playground:typescript playground