TypeScript 4.9 发布!

TypeScript 是一种通过添加类型和类型检查构建在 JavaScript 之上的语言。类型可以描述诸如对象的形状、如何调用函数以及属性是否可以为 null 或 undefined 之类的东西。TypeScript 可以检查这些类型,以确保我们不会在程序中出错,这样我们就可以自信地编码。它还可以为编辑器中的自动完成、转到定义和重构等其他工具提供支持。事实上,如果您使用过 Visual Studio 或 VS Code for JavaScript 等编辑器,您其实已经体验过由 TypeScript 提供的支持了!

satisfies 运算符

TypeScript 开发人员经常面临两难境地:我们既要确保某些表达式匹配某些类型,又要保留该表达式的最具体类型以用于推理目的。

新的 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();

使用 in 运算符缩小未列出属性的范围

作为开发人员,我们经常需要处理在运行时不完全已知的值。事实上,我们通常不知道属性是否存在,无论我们是从服务器获得响应还是读取配置文件。JavaScript 的 in 运算符可以检查对象上是否存在属性。

以前,TypeScript 允许我们缩小任何未明确列出属性的类型的范围。

interface RGB {
red: number;
green: number;
blue: number;
}

interface HSV {
hue: number;
saturation: number;
value: number;
}

function setColor(color: RGB | HSV) {
if ("hue" incolor) {
// 'color' now has the type HSV
 }
// ...
}

在这里,RGB 类型没有列出色调并缩小范围,留给我们的是 HSV 类型。

TypeScript 4.9 使 in 运算符在缩小未列出属性的类型时更加强大。该语言不会按原样保留它们,而是将它们的类型与 Record<"property-key-being-checked", unknown> 相交。

interface Context {
 packageJSON: unknown;
}

function tryGetPackageName(context: Context): string | undefined {
const packageJSON = context.packageJSON;
// Check to see if we have an object.
if (packageJSON && typeof packageJSON === "object") {
// Check to see if it has a string name property.
if ("name" in packageJSON && typeof packageJSON.name === "string") {
// Just works!
return packageJSON.name;
 }
 }
return undefined;
}

TypeScript 4.9 还加强了一些关于如何使用 in 的检查,确保左侧可分配给类型 string | number | symbol,右侧可分配给对象。这有助于检查我们是否使用了有效的属性键,而不是不小心检查基元。

自动访问器

TypeScript 4.9 支持 ECMAScript 中即将推出的功能,称为自动访问器。自动访问器的声明就像类的属性一样,除了它们是用 accessor 关键字声明。

class Person {
    accessor name: string;
    
    constructor(name: string) {
        this.name = name;
    }
}

检查 NaN 是否相等

JavaScript 开发人员的一个主要难题是使用内置的相等运算符检查值 NaN。对于某些背景,NaN 是一个特殊的数值,代表“不是数字”。没有什么能等于 NaN——即使是 NaN!但至少对称,一切总是不等于 NaN。

严格来说,这不是特定于 JavaScript 的问题,因为任何包含 IEEE-754 浮点数的语言都具有相同的行为。但是 JavaScript 的主要数字类型是浮点数,而 JavaScript 中的数字解析通常会导致 NaN。反过来,检查 NaN 最终变得相当普遍,正确的方法是使用 Number.isNaN——但正如我们提到的,很多人不小心最终使用 someValue === NaN 进行检查。

TypeScript 现在与 NaN 直接比较时会出错,并且会建议使用 Number.isNaN 的一些变体。

function validate(someValue: number) {
return someValue !== NaN;
//    ~~~~~~~~~~~~~~~~~
// error: This condition will always return 'true'.
//       Did you mean '!Number.isNaN(someValue)'?
}

我们认为,此更改应该严格有助于捕获初学者错误,类似于 TypeScript 当前在与对象和数组文字进行比较时发出错误的方式。

File-Watching 使用文件系统事件

在 TypeScript 4.9 中,文件监视默认由文件系统事件提供支持,只有在我们未能设置基于事件的监视程序时才会回退到轮询。对于大多数开发人员来说,当以 --watch 模式运行或使用 TypeScript 支持的编辑器(如 Visual Studio 或 VS Code)运行时,这应该会提供更少的资源密集型体验。

文件监视的工作方式仍然可以通过环境变量和 watchOptions 进行配置。一些编辑器如 VS Code 可以独立支持 watchOptions。使用源代码驻留在网络文件系统(如 NFS 和 SMB)上的更奇特设置的开发人员可能需要选择回到旧行为。不过,如果服务器具有合理的处理能力,则启用 SSH 并远程运行 TypeScript 可能会更好,这样它就可以直接访问本地文件。VS Code 有很多远程扩展来简化这件事。

编辑器的“Remove Unused Imports”和“Sort Imports”命令

在 TypeScript 4.3 中,我们引入了一个名为“Sort Imports”的命令,它只会对文件中的导入进行排序,但不会删除它们——并且会像这样重写文件。
``
import { bar, foo } from "./helper";
import { HoneyBadger, Moose, Zebra } from"./zoo";

let x: Moose | HoneyBadger = foo();
``
“Sort Imports”的警告是,在 Visual Studio Code 中,此功能仅可用作保存时命令,而不是可手动触发的命令。

TypeScript 4.9 增加了另一半,现在提供了“Remove Unused Imports”。TypeScript 现在将删除未使用的导入名称和语句,但会单独保留相对顺序。
``
import { Moose, HoneyBadger } from"./zoo";
import { foo } from "./helper";

let x: Moose | HoneyBadger = foo();
``
所有希望使用任一命令的编辑器都可以使用此功能;但值得注意的是,Visual Studio Code(1.73 及更高版本)将内置支持,并将通过其命令面板显示这些命令。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,137评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,824评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,465评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,131评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,140评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,895评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,535评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,435评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,952评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,081评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,210评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,896评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,552评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,089评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,198评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,531评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,209评论 2 357

推荐阅读更多精彩内容