TypeScript 5.3 初探,有你想要的功能吗?

8月24日,TypeScript 发布 5.2 版本,进行多项功能更新。同时官方宣布 5.3 迭代计划,可能新增导入属性,虽 throw 表达式在 5.3 不太可能实现但团队在积极推进,还可能引入隔离声明、改进泛型函数缩小范围、推出字符串自动补全新功能,此外 Node.js 的 fetch 功能未添加到 @types/node 引发讨论。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

6fe31965e268752d1f3c13d2d20e6e2d.gif

【CSDN 编者按】本文所提到的这些功能,你最希望哪个能实现。

原文链接:https://www.totaltypescript.com/typescript-5-3

作者 | Matt Pocock       翻译 | ChatGPT       

责编 | 梦依丹

出品 | CSDN(ID:CSDNnews)

8月24日,TypeScript 高级项目经理 Daniel Rosenwasser 在官博发布 TypeScript 5.2 版本,该版本进行了多项功能更新,添加了对 ECMAScript 中即将推出的显式资源管理功能支持、推出了装饰器元数据(Decorator Metadata),可以让装饰器轻松地在其使用的任何类上创建和使用元数据、命名和匿名元组元素,Tuple 类型支持为每个元素提供可选的标签或名称等。

与此同时,官方团队还宣布了 TypeScript 5.3 迭代计划,该计划是用来规划5.3 版本可能包含的功能,本文作者总结了一些开发者最感兴趣的功能。一起看下。

090a27731e8c030dd5c1e738a430c1aa.png

f22b81261dec3ad3dfb1df217afae35d.png

导入属性(Import Attributes)

TypeScript 5.3 很可能会新增导入属性,该功能已经达到 Stage 3 的 TC39 提案。该功能允许开发者导入指定选项,例如,你可以指定 JSON 导入类型:

import json from './foo.json' with { type: 'json' };

它还支持你指定动态导入的类型:

import("foo.json", { with: { type: "json" } });

还可以使用经过验证的类型重新导出一个模块:

export { val } from './foo.js' with { type: "javascript" };

或者使用经过验证的类型实例化 worker:

new Worker("foo.wasm", {
  type: "module",
  with: { type: "webassembly" },
});

添加该功能的主要目的是处于安全性考虑,防止响应服务器意外提供不同的 MIME 类型,从而导致代码意外执行的情况。

84c5a39df8e8d5216c4cf38b4b94c009.png

支持 throw 异常

throw 表达式是 JavaScript 里的一种语法,这是一种在不使用语句的情况下抛出异常的一种方式,可以写成:

const id = searchParams.id || throw new Error("id is required");

这种方式在 JavaScript 中并不可用,在 TypeScript 中会抛出一个错误:

const id = searchParams.id || throw new Error("id is required");

Expression expected.

然而,throw 表达式在 TypeScript 5.3 中不太可能实现。该提案仍处于第2阶段,离添加到 TypeScript 所需的第3阶段还有一段距离。

但 TypeScript 迭代计划特别增加了对这个提案的“支持”。这意味着他们正在积极地开展工作,因此它有可能在未来的 JavaScript/TypeScript 版本中实现。

a52b55a0767d87521117857bfb451fed.png

隔离声明(Isolated Declarations)

在一个包含许多软件包的单一代码库中,你可能会遇到相互依赖的情况。这种情况下,你可能会得到一个非常深层次、类似于“家族树”的结构,其中软件包 A 依赖于软件包 B,而软件包 B 又依赖于软件包 C,以此类推。

在这种情况下,TypeScript 的检查可能会变得非常缓慢。首先必须检查 D 包,然后是 C 包、B包,最后才是A包。

造成这种情况的原因是 TypeScript 本身需要打印每个包的声明文件(.d.ts文件),这也意味着对它们进行类型检查,该过程很慢。

一种提速方法是让更快的工具,如 esbuild 或 swc 为每个包创建声明文件。但目前这是不可能的。TypeScript 对于需要添加多少注释到代码中并没有严格要求。第三方工具无法根据推断生成声明文件。

引入隔离声明 - 这是 TypeScript 的一种新、更严格的模式,可以解决这个问题。

可以在 tsconfig.json 添加一个选项:

{
  "compilerOptions": {
    "isolatedDeclarations": true
  }
}

一旦启用,它便会要求开发者人员严格添加注释,具体如何要求仍在讨论中,并可能随时间的变化而改变。作为一个 Demo,导出函数的返回类型注释很可能是强制性的,以避免 TypeScript 需要推断它们。

开发者只需要在共享包上启用 isolatedDeclarations - 你不需要在应用程序代码上启用它。限制共享包的做法可能是可取的,因为通常情况下,开发者会希望对共享包添加更多的注释。

2bd823067ba3fa98c301b1ff9d504110.png

泛型函数缩小范围

在处理通用函数时,我给出的一个建议是“不要害怕使用 as”。目前的 TypeScript 在通用函数内部的缩小类型方面表现并不理想。

例如:

5758d1587b4448a319e42b9d67b24606.png

上述代码正在尝试根据 key 从对象中返回一个值。如果传入'foo',将返回一个字符串。如果传入'bar',则是返回一个数字。

代码看起来没问题,可殊不知 TypeScript 却报错了。

原因则是 TypeScript 没有将 Example[T] 缩小为正确的 key,一旦对 Example[T] 进行缩小操作,就会导致它被类型化为 never,因此报错。

目前唯一能让该段程序正常运行的方法是将其输入为“never”。

function exampleFunc<T extends keyof Example>(
  key: T
): Example[T] {
  if (key === "foo") {
    return "abc" as never;
  } else {
    return 123 as never;
  }
}

感觉真的很糟。

TypeScript 5.3 可能会在这里进行一些更改。有个 long-open issue 提到了做此更改的动机。

此项更对我来说是非常高兴的事情。这里的泛型错误推断于开发者而言,并不容易,如果 TypeScript 在此类错误下变的更聪明一些,那开发者用起泛型会更加容易。

60fffb5615d0d1ae9859cca609076d09.png

字符串自动补全

TypeScript 里面有个著名的字符串补全技巧,就是使用 string&{}来实现自动宽松补全:

type IconSize =
  | "small"
  | "medium"
  | "large"
  | (string & {});

该注释看起来很奇怪,但它存在的原因是为了让你在传递任何值给 IconSize 的同时,还能获得其他三个值的自动补全。

const icons: IconSize[] = [
  "small",
  "medium",
  "large",
  "extra-large",
  "anything-goes",
];

TypeScript 5.3 可能会推出一个新功能,使得这个 hack 变得不再必要。开发者将能够使用字符串作为类型,并获得相同的自动补全功能。

type IconSize =
  | "small"
  | "medium"
  | "large"
  | string;

这将非常受欢迎 - 尤其是因为 Webstorm 用户已经拥有了多年。

0e3be14c67499d2a1e7f42d88ba79629.png

fetch in @types/node

在 2022 年 2 月 1 日,Node.js 团队合并了一个拉取请求,将 Fetch API 添加到 Node.js 中。这意味着 Node.js 将拥有一个像浏览器一样的 fetch 函数。但该功能尚未被添加到 @types/node 中,目前该问题在 DefinitelyTyped 板块下引发了激烈讨论。

推荐阅读:

f6bae146cfaaaaedc1e4a631d39c5920.png

华为 Mate 60 Pro 未发先售 6999 元;iPhone 15 也要来了;Rust 1.72.0 发布|极客头条

▶HuggingFace 机器学习总监、Grafana Labs 团队与你相约 KubeCon 2023!

▶数据库战争 2.0:为什么每个人都在开发数据库?

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CSDN资讯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值