TypeScript 4.9 发布,新增 satisfies 操作符
来源: OSCHINA 编辑: 罗奇奇 2022-11-17 07:04:50 1TypeScript 4.9 已正式发布,此版本引入了多项新功能。
此版本的新内容:
- 新增
satisfies
操作符 - 支持使用
in
运算符缩小 Unlisted Property - Checks For Equality on
NaN
(与 NaN 直接比较时报错) - File-Watching 使用文件系统事件
- 编辑器的 “删除未使用的导入” 和 “排序导入” 命令
- return 关键字的 go-to-definition 功能
- 在 classes 中包含自动访问器
- 性能改进
- 修复和重大更改
下面详细介绍一下部分新功能:
新增 satisfies 操作符
TypeScript 开发者可能遇到的一个问题:既要确保表达式匹配某些类型,又要保留该表达式的具体类型。举例:
// Each property can be a string or an RGB tuple.
const palette = {
red: [255, 0, 0],
green: "#00ff00",
bleu: [0, 0, 255]
// ^^^^ sacrebleu - we've made a typo!
};
// We want to be able to use array methods on 'red'...
const redComponent = palette.red.at(0);
// or string methods on 'green'...
const greenNormalized = palette.green.toUpperCase();
可以看到, blue 错写成了 bleu,这里可以尝试通过在 palette 上使用类型注释来捕捉 bleu 拼写错误,但会丢失每个属性的信息。
type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];
const palette: Record<Colors, string | RGB> = {
red: [255, 0, 0],
green: "#00ff00",
bleu: [0, 0, 255]
// ~~~~ The typo is now correctly detected
};
// But we now have an undesirable error here - 'palette.red' "could" be a string.
const redComponent = palette.red.at(0);
新的 satisfies 操作符可以验证表达式的类型是否匹配某种类型,而不更改该表达式的结果类型。例如,可以使用 satisfies 来验证 palette 的所有属性是否与 string | number [] 兼容:
type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];
const palette = {
red: [255, 0, 0],
green: "#00ff00",
bleu: [0, 0, 255]
// ~~~~ The typo is now caught!
} satisfies Record<Colors, string | RGB>;
// Both of these methods are still accessible!
const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();
satisfies 可以用来捕获很多潜在的错误,例如确保一个对象具有某种类型的所有键:
type Colors = "red" | "green" | "blue";
// Ensure that we have exactly the keys from 'Colors'.
const favoriteColors = {
"red": "yes",
"green": false,
"blue": "kinda",
"platypus": false
// ~~~~~~~~~~ error - "platypus" was never listed in 'Colors'.
} satisfies Record<Colors, unknown>;
// All the information about the 'red', 'green', and 'blue' properties are retained.
const g: boolean = favoriteColors.green;
更多 satisfies 示例,可以查看提出此问题和实现该运算符的 PR 。
类中的自动访问器
TypeScript 4.9 支持 ECMAScript 中即将推出的功能,称为自动访问器,自动访问器的声明就像类的属性一样,只是它们用 accessor 关键字声明。
class Person {
accessor name: string;
constructor(name: string) {
this.name = name;
}
}
自动访问器会转化为具有无法访问的私有属性的获取和设置访问器。
class Person {
#__name: string;
get name() {
return this.#__name;
}
set name(value: string) {
this.#__name = name;
}
constructor(name: string) {
this.name = name;
}
}
阅读关于该功能的 original PR 。
与 NaN 直接比较时报错
Javascrpit 的 NaN 是一个特殊的数值,代表 “不是数字”, NaN 不等于任何值 —— 即使是它本身。
console.log(NaN == 0) // false
console.log(NaN === 0) // false
console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
这不是特定于 JavaScript 的问题,任何包含 IEEE-754 浮点数的语言都是如此。但是 JavaScript 的主要数字类型是浮点数,很多场景都需要检查 NaN,而正确的方法是使用 Number.isNaN 来检查 NaN 类型。
但问题来了,很多新手都会习惯性使用 someValue === NaN 进行检查。因此 TypeScript 4.9 引入了更严格的警告:与 NaN 直接比较时会报错,并且会建议使用 Number.isNaN 的一些变体。
function validate(someValue: number) {
return someValue !== NaN;
// ~~~~~~~~~~~~~~~~~
// error: This condition will always return 'true'.
// Did you mean '!Number.isNaN(someValue)'?
}
File-Watching 使用文件系统事件
在早期版本中,TypeScript 严重依赖轮询来查看单个文件。在 TypeScript 4.9 中,文件监视默认由文件系统事件提供支持,只有在未能设置基于事件的监视程序时才会回退到轮询。
对于大多数开发人员来说,当以 --watch 模式运行或使用 TypeScript 支持的编辑器(如 Visual Studio 或 VS Code)运行时,会提供更好性能体验。
可以在 GitHub 上阅读有关此更改的更多信息。
引入 “删除未使用的导入” 命令
以前,TypeScript 只支持两个编辑器命令来管理导入:
import { Zebra, Moose, HoneyBadger } from "./zoo";
import { foo, bar } from "./helper";
let x: Moose | HoneyBadger = foo();
第一个称为 “组织导入 -Organize Imports”,它会删除未使用的导入,然后对剩余的进行排序。但它会重写文件,使其看起来像这样:
import { foo } from "./helper";
import { HoneyBadger, Moose } from "./zoo";
let x: Moose | HoneyBadger = foo();
TypeScript 4.3 引入了一个名为 “Sort Imports” 的命令,它只会对文件中的导入进行排序,但不会删除导入,它会像这样重写文件:
import { bar, foo } from "./helper";
import { HoneyBadger, Moose, Zebra } from "./zoo";
let x: Moose | HoneyBadger = foo();
TypeScript 4.9 提供了 “删除未使用的导入 - Remove Unused Imports” 功能命令,该功能将删除未使用的导入名称和语句,但会单独保留其相对顺序。
import { Moose, HoneyBadger } from "./zoo";
import { foo } from "./helper";
let x: Moose | HoneyBadger = foo();
可以在此处查看该功能的详细信息。
return 关键字的 go-to-definition 功能
在 return 关键字上运行 go-to-definition 时,TypeScript 现在会跳转到相应函数的顶部,有助于快速了解 return 属于哪个函数。
TypeScript 会将此功能扩展到更多关键字,例如 await 和 yield 或 switch、case 和 default。
查看该功能的原始 PR 了解更多信息。
其余性能优化和 Bug Fixed 等细项可以在发布公告中查阅。
可以通过 NuGet 获取新版本,或者使用 npm,通过以下命令 :
npm install -D typescript
标签:TypeScript,name,4.9,NaN,green,satisfies,red
From: https://www.cnblogs.com/sexintercourse/p/16904190.html