江苏龙网

  1. 主页 > 生活百科 > >

TypeScript 4.9 发布！重点新特性解读

TypeScript


TypeScript 4.9 发布！重点新特性解读

文章插图
 
大家好，我是 Echa 。
11 月 1 日，TypeScript 4.9 发布了候选版本 (RC)，直到稳定版发布基本上不会有太大变化了，本次带来的更新还是挺有意思的，下面我就跟大家来一起看一下～
新的 satisfies 操作符
在使用 TypeScript 类型推断的时候，有很多情况下会让我们面临两难的选择：我们即希望确保某些表达式能够匹配某些类型，但也希望保留这个表达式的特定类型用来类型推断 。
比如下面的例子，我们定义了一个颜色选择对象：
const palette = { red: [255, 0, 0], green: "#00ff00", blue: [0, 0, 255] };
因为每个属性都被赋予了默认值，ts 会自动帮我们自动推导 palette 的属性类型，所以我们可以直接调用它们的方法：
// red 被推断为 Number[] 类型 const a = palette.red.at(0); // green 被推断为 string 类型 const b = palette.green.toUpperCase();
因为颜色都是固定的，我们想让我们的 palette 对象拥有特定的几个属性，来避免我们写出一些错别字：
const palette = { // 错别字：rad -> red rad: [255, 0, 0], green: "#00ff00", blue: [0, 0, 255] };
所以我们可能会为 palette 定义一个类型，这样错别字就会被检测出来了：
type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; const palette: Record = { rad: [255, 0, 0], // ~~~~ The typo is now correctly detected green: "#00ff00", blue: [0, 0, 255] };
【TypeScript 4.9 发布！重点新特性解读】但是这时候我们再调用 palette.red 的方法，你会发现 TS 的类型推断会出错：
type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; const palette: Record = { red: [255, 0, 0], green: "#00ff00", blue: [0, 0, 255] }; // 'palette.red' "could" 的类型是 string | RGB，所以它不一定存在 at 方法 const a = palette.red.at(0);
这就让我们陷入了两难的境地，我们用更严格了类型约束了写出 bug 的可能性，但是却失去了类型推断的能力 。
satisfies 关键字就是用来解决这个问题的，它既能让我们验证表达式的类型是否与某个类型匹配，也可以保留基于值进行类型推断的能力：
type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; const palette = { rad: [255, 0, 0], // 可以捕获到错别字 rad green: "#00ff00", blue: [0, 0, 255] } satisfies Record; // 都可以调用 const a = palette.red.at(0); const b = palette.green.toUpperCase(); in 操作符类型收窄优化
在日常开发中，我们经常需要处理一些在运行时不完全确定的值，比如我们现在有下面两个类型：
interface Duck { quack(): string; } interface Cat { miao(): string; }
在实际使用过程中，TS 不能确定 value 是否是上面中哪一个类型，所以会抛出错误：
function main(value: Duck | Cat) { if (value.quack) { // roperty 'quack' does not exist on type 'Duck | Cat'. return value.quack; } }
我们可能会使用 in 这样的关键字来实现简单的类型收窄：
function main(value: Duck | Cat) { if ('quack' in value) { return value.quack; } }
也可以实现一个更通用的类型守卫，可以参考我这篇文章：什么是鸭子类型？
 
但是，这个写法的前提是我们用到的对象有明确的类型，如果这个对象的属性没有明确的类型呢？我们来看看下面这段 JAVAScript 代码：
function tryGetPackageName(context) { const packageJSON = context.packageJSON; // 检查是否是个对象 if (packageJSON && typeof packageJSON === "object") { // 检查是否存在一个字符串类型的 name 属性 if ("name" in packageJSON && typeof packageJSON.name === "string") { return packageJSON.name; } } return undefined; }
把这段代码重写为规范的 TypeScript，我们只需要定义一个 Context 类型，但是由于 packageJSON 没有明确的类型定义，再使用 in 进行类型收窄就有问题了：
interface Context { packageJSON: unknown; } function tryGetPackageName(context: Context) { const packageJSON = context.packageJSON; // 检查是否是个对象 if (packageJSON && typeof packageJSON === "object") { // 检查是否存在一个字符串类型的 name 属性 if ("name" in packageJSON && typeof packageJSON.name === "string") { // ~~~~ // error! Property 'name' does not exist on type 'object. return packageJSON.name; // ~~~~ // error! Property 'name' does not exist on type 'object. } } return undefined; }


推荐阅读


上一篇：没有了

下一篇：我的朋友因为 JSON.stringify 差点丢了奖金