TypeScript新语法satisfies操作符的使用方法

更新日期: 2023-01-13阅读: 1.5k标签: 语法

TypeScript 4.9 将新增 satisfies 操作符,类似于 as ,但他更像一个不那么 strict 的 as 。新的 satisfies 操作符可以验证表达式的类型是否匹配某种类型,而不更改该表达式的结果类型。下面详细介绍一下部分新功能:


新增 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;


类中的自动访问器

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;
    }
}


与 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)运行时,会提供更好性能体验。


引入 “删除未使用的导入” 命令

以前,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。

其余性能优化和 Bug Fixed 等细项可以在发布公告中查阅。

可以通过 NuGet 获取新版本,或者使用 npm,通过以下命令 :

npm install -D typescript
作者:漫思,原文链接:https://www.cnblogs.com/sexintercourse/p/16904190.html

链接: https://fly63.com/article/detial/12322

30-seconds-code:总结了大量的使用ES6语法实现的代码块

30-seconds-code这个项目是一个非常优秀的JavaScript项目,这里总结了大量的使用ES6语法实现的代码块,项目的设计目标就是更简洁,更高效,更快速的实现基础代码模块。

如何让Node.js支持ES6的语法【转载】

不同版本的Node.js对Babel有不同的支持力度。为了让Node.js支持所需的ES6语法,可以加入Babel的支持。

JavaScript 语法流派现状调查

我们通常会有意无意的把JavaScript和其他编程语言区分开,有一个重要因素是……由于它的特性本身(太灵活了吧),它似乎不仅仅是一种语言,而更像是一帮老司机在矫情造作之下乱伦出来的生态系统。

js基本语法

JavaScript是一种轻量性脚本语言 ,其语句以;结束,语句块用{...},js应许末尾不加,浏览器Js引擎会自动在每个语句的结尾补上,js功能主要是:动态修改html页面内容,包括创建、删除html页面元素、修改html页面元素的内容

带@的css语法,你知道多少?

css的顶层样式表由两种规则组成的规则列表构成,一种称为at—rule规则,也就是at规则,另一种是qualified rule,也就是普通规则。今天就学习一下at规则

es6 Module语法

export用于定义要输出的变量(let、var、const、function、class),定义的变量与值是动态绑定关系。匿名定义本质上是采用 default 为名称,与上面2个的区别是在加载时可以不用写大括号还能自定义名称。

es6中的语法_面试es6常用语法整理

箭头函数;扩展运算符 ...的一个通用的用法就是把对象展开;变量声明es6中不建议继续使用var来声明变量,推荐使用let和const声明,以此避免var声明存在的弊端

常见的JavaScript“陷阱”

随着ES6标准的普及,JavaScript已经拥有许多新的语法糖,这让我们编写可读的,高质量的代码变得更加方便,但即使这样仍然会遇到一些潜在的陷阱。

.htaccess文件RewriteRule语法规则

.htaccess文件是运行Apache Web Server的Web服务器的配置文件,对配置和重定向Apache Web Server文件系统很有用。在这里,我将讨论.htaccess文件RewriteRule语法规则。

什么是抽象语法树?「译」

AST 是抽象语法树的缩写词,表示编程语言的语句和表达式中生成的 token。有了 AST,解释器或编译器就可以生成机器码或者对一条指令求值。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!