ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

TypeScript 可选属性实战:The Concise TypeScript Book 第 13 章精读与 strictNullChecks、默认值、工具类型纵深解析

TypeScript 可选属性实战:The Concise TypeScript Book 第 13 章精读与 strictNullChecks、默认值、工具类型纵深解析 文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载本文以 The Concise TypeScript Book当前开源仓库typescript-book印尼语版第 13 章Properti Opsional可选属性为骨架完整继承原文档的两个核心知识点——用?声明可选属性、为可选属性指定默认值——并结合仓库中strictnullchecks、type-manipulation、narrowing、object-types等章节的真实内容深入讲解可选属性在严格空值检查下的真实类型语义、与Partial/Required工具类型的配合方式以及在实际项目中处理可能缺失数据时的完整方案。用?声明可选属性原文档optional-properties.md开篇给出的定义是对象可以通过在属性名称末尾添加问号?来指定可选属性Optional Properties。这是 TypeScript 类型系统中控制某属性是否必须存在的基础机制type X { a: number; b?: number; // Optional };这段代码定义了对象类型Xa: number是必填属性——任何X类型的值都必须提供a否则类型检查不通过b?: number是可选属性——b可以省略也可以在提供时取任意number值。也就是说以下两个对象都合法const x1: X { a: 1 }; // 省略可选属性 b合法 const x2: X { a: 1, b: 2 }; // 提供可选属性 b合法而同仓库中对象类型章节在介绍 interface 时给出的email?: string写法与上面的 type alias 写法语义一致interface User { name: string; age: number; email?: string; }可选属性在真实项目中最常见的场景就是描述字段可能缺失的结构例如 API 响应、用户配置、表单数据等。严格空值检查下可选属性的类型是什么单独理解?还不够可选属性的实际行为与编译器选项strictNullChecks强相关。同仓库的 strictnullchecks 章节对这一选项的定义是strictNullChecks是 TypeScript 的编译器选项用于强制执行严格的空值检查。当启用此选项时变量和参数只有在被显式声明为null | undefined联合类型时才能被赋值为null或undefined。如果变量或参数未被显式声明为可空TypeScript 将产生错误以防止运行时的潜在错误。把这条规则映射到可选属性上未开启strictNullChecks时undefined和null是任何类型的子类型因此读取x.b几乎不会出现类型层面的报错空值问题被静默掩盖开启strictNullChecks时可选属性b?: number在语义上等价于该属性可能缺失。此时从对象上读取b其类型会被视为number | undefined任何把b直接当number使用的地方比如直接参与算术运算都会报错逼迫开发者先处理缺失分支。这正是原文档第二个例子必须引入默认值的原因——只有处理了undefined的可能性可选属性才能安全参与计算。为可选属性指定默认值解构默认值原文档给出的第二个核心示例是当属性是可选的时可以指定默认值。其完整代码如下type X { a: number; b?: number; }; const x ({ a, b 100 }: X) a b;这里的关键技术是参数解构中的默认值destructuring default value其语义是当传入对象的b不存在即调用方省略了该可选属性时b取默认值100当b被显式传入且值为undefined时同样回退到100当b被传入具体数字时使用传入值。对应的调用示例如下console.log(x({ a: 1 })); // 101 b 缺失回退到 100 console.log(x({ a: 1, b: 2 })); // 3 使用传入的 b这样一来函数体内部的a b中b的类型收窄为确定的number在strictNullChecks开启时也能通过类型检查。这种可选属性 解构默认值的组合本质上是把b b ?? 100这类手动空值兜底前置到了参数声明处代码更紧凑、契约更清晰。需要注意默认值的触发条件是属性缺失或值为undefined而不是 falsy如果调用方显式传入b: 0函数会使用0而不是回退到100。这与 JavaScript 解构默认值的标准语义一致。可选属性与类型注解的配合规范可选属性最常出现在对象类型的声明中而类型注解章节给出的通用建议对含可选属性的代码同样适用考虑对签名signature进行类型注解但不在函数体内局部变量上注解并且始终给对象字面量加上类型。结合可选属性一个典型的签名带注解 默认值兜底的完整写法是type Config { host: string; port?: number; // 可选属性 timeout?: number; // 可选属性 }; const startServer ({ host, port 8080, timeout 3000 }: Config): string { return listening on ${host}:${port} (timeout ${timeout}ms); };这里所有可选属性都通过解构默认值获得了确定类型返回值注解string则符合该章节对复杂函数写明返回类型的建议。用工具类型批量控制可选性PartialT 与 RequiredT原文档的?是逐属性手工标记而在处理已有类型的整体可选化/必选化时类型操作章节中的两个内置工具类型更为高效PartialT——构造一个所有属性 T 都被设为可选的类型type Person { name: string; age: number; }; type A PartialPerson; // { name?: string | undefined; age?: number | undefined; }RequiredT——构造一个所有属性 T 都被设为必选的类型与Partial正好互逆type Person { name?: string; age?: number; }; type A RequiredPerson; // { name: string; age: number; }这两个工具类型正是可选属性概念的类型级批量操作PartialPerson等价于把Person的每个属性名后自动加上?RequiredT则反向去除可选标记。它们在实际开发中最常用的两个场景更新接口/表单场景数据库更新、表单局部提交通常只携带部分字段参数类型写作PartialUser即可精确表达所有字段均可选从宽松类型收紧当某个中间数据结构大量使用可选属性时在边界处用Required...强制补全避免undefined向下游扩散。从该章节给出的结果注释如{ name?: string | undefined; ... }还可以印证前文所述开启严格空值检查时可选属性展开后的类型确实显式携带了| undefined。可选属性的读写语义与 readonly 的对比理解可选属性时容易与只读属性混淆这里对照仓库中的相邻章节说明二者正交可选?控制的是属性是否存在见原文档 optional-properties.md只读readonly控制的是属性能否被重新赋值readonly-properties 章节的说明是readonly修饰符确保属性不能被重新赋值但不提供完全的不可变性保证且ReadonlyT工具类型可将整个类型的属性批量设为只读。两者可以自由组合例如可能存在且存在后不可修改的字段type Connection { id: string; endpoint?: string; // 可选 createdAt: readonly { // 必填但对象本身声明了只读约束的字段 value: number; }; };读取可选属性前的类型收窄即便声明了可选属性直接读取它仍会带着undefined的可能。类型收窄narrowing章节列举的多种收窄手段对可选属性同样有效其中最常用的是基于 truthiness 的收窄const toUpperCase (name: string | null) { if (name) { return name.toUpperCase(); } else { return null; } };对应到可选属性典型写法有两种const config: X { a: 1 }; // 方式一显式判空 if (config.b ! undefined) { console.log(config.b 1); // b 已收窄为 number } // 方式二nullish coalescing??兜底 const value config.b ?? 0;配合这些手段可选属性 → 判空/默认值 → 收窄为确定类型就形成了处理可能缺失数据的标准链路。小结与延伸阅读回到原文档的两个核心结论并加以纵深声明在属性名后加?即可声明可选属性b?: number该属性可整体缺失默认值在函数参数解构中使用b 100形式的默认值可让缺失或为undefined的可选属性回退到确定值从而安全参与后续计算纵深在strictNullChecks开启时可选属性的读取类型携带| undefined需要通过判空、??或解构默认值收窄批量场景则交给PartialT/RequiredT工具类型。如需继续深入类型系统建议按以下仓库内文档顺序阅读均为印尼语版第 13 章周边章节类型注解第 12 章只读属性第 14 章strictNullChecks第 19 章类型收窄第 21 章对象类型第 28 章类型操作与工具类型第 61 章完整目录赞分享文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载相关推荐TypeScript 可选属性实战指南深入 The Concise TypeScript Book 的 ? 语法与默认值TypeScript 可选属性实战指南深入 The Concise TypeScript Book 的 ? 语法与默认值 本篇指南基于 The Concise文档教程The Concise TypeScript Book 第 12 章深度解读TypeScript 类型注解Type Annotations完整实战指南The Concise TypeScript Book 第 12 章深度解读TypeScript 类型注解Type Annotations完整实战指南 类文档教程The Concise TypeScript Book 精读TypeScript readonly 只读属性完整实战指南The Concise TypeScript Book 精读TypeScript readonly 只读属性完整实战指南 本篇对应 The Concise T文档教程上一篇告别网盘限速九大平台直链下载神器完全指南下一篇网盘直链下载助手八大主流网盘高速下载的终极解决方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表