TypeScript 5.2 有哪些新特性

2023年8月份，TypeScript 5.2发布。TypeScript基本上每隔两三个月就会有一个新版本，而且每次信息量都不小。咱们也要小步快跑式的跟上。

这次的新特性，罗列如下，内容多的部分我们会单独讲解。

显式的资源管理（Explicit Resource Management）

对ECMAScript新特性的支持：具体内容请看这篇文章

装饰器Metadata（Decorator Metadata）

对ECMAScript新特性的支持：具体内容请看这篇文章。

Tuple元组有无标签均可

具体内容请看这篇文章。

Union类型的方法调用问题

具体内容请看这篇文章。

immutable版本的数组方法

对ECMAScript新特性的支持：支持immutable版本的数组方法：toSplice、toReversed、toSorted、with。
TypeScript 5.2 对它们进行了类型支持。

要了解这几个新特性的详情，请看这篇文章

有一点要注意的是，要让tsc命令识别这些方法，那lib参数一定要指定esnext，否则即使你升级了新版本的 TypeScript，tsc还是不会识别这些数组。

在命令行单独指定lib的方式：tsc example.ts --lib esnext

我们也可以在tsconfig.json中指定lib。

symbol作为弱类型的key

对ECMAScript新特性的支持。symbol也可以作为WeakMap、WeakSet对象的key了

TypeScript 5.2 对它们进行了类型支持。

要了解这几个新特性的详情，请看这篇文章

同样要注意的是，要让tsc命令识别这些方法，那lib参数一定要指定esnext，否则即使你升级了新版本的 TypeScript，tsc还是不会识别这些数组。

在命令行单独指定lib的方式：tsc example.ts --lib esnext

我们也可以在tsconfig.json中指定lib。

纯类型可从任意TS文件导入

支持从所有的Typescript类型文件导入纯类型，类型文件后缀包括：.ts .mts .cts .tsx。

一直以来导入纯类型只能从.d.ts文件导入：

import type { Car } from './automobile.d.ts'

后来TypeScript加了一个新的选项allowImportingTsExtensions，当你不生成JavaScript文件时，允许你导入业务逻辑实现文件.ts文件，而不是只能导入类型文件.d.ts。

新版本不再有限制，不再需要allowImportingTsExtensions选项，可以直接导入.ts类型的实现文件。
例如：

import type { Car } from './automobile.ts';
export function f(car: Car) {
	// ...
}

只要./automobile.ts导出了类型，那就可以在其他文件中导入。

另外对应的JSDoc中就可以像下面这样：

/**
 * @param {import("./automobile.ts").Car} car
 */
export function f(car) {
    // ...
}

VSCode新特性：键值对后自动加逗号

假如现在我们正在编辑下面的代码：

type Person = {
  name: string;
  email: string;
}

let p: Person = {
  name: 'fff'
  email
}

编辑p对象时，忘记了在email前面加逗号，这时VSCode会提示你，你只需要按一下回车，键名自动完成的同时，也会把逗号加上。

请看下面的示例截图：

不过使用这个功能有几个前提条件：

1. VSCode所使用的TypeScript必须是TypeScript 5.2版本及以上。
2. VSCode必须是新版的，咱们直接更新到最新版就行。
3. 你所编辑的对象必须有类型，这样VSCode才能自动完成。就像上面示例中的`p`对象，其类型是`Person`。

可以在VSCode的编辑器右下方查看和切换VSCode当前使用的TypeScript版本：

将变量内容内联到实际使用处

我们借用一下TypeScript官方博客的动态图，一目了然：

你同样需要升级TypeScript到5.2或者以上版本，使用最新的VSCode。

函数调用时，参数名提示可点击

所谓参数名提示如下图所示：

上图中的helpB是一个函数，bValue是其参数。当开发人员使用helpB，开始写参数时，VSCode会在参数的位置提示出参数名字。

但是这个功能即使最新版本的VSCode也不是自动开启的。
我们可以找到菜单项Code->首选项->设置->工作区->搜索parameter hints->找到TypeScript>Inlay Hints > Parameter Names，然后选择literal或者all，便可以开启函数参数名提示。

TypeScript 5.2 给我们带来的新特性是这个函数参数提示可以点击跳转到其定义的地方。
示例截图如下：

在MacOS上的提示是用cmd + 点击。

优化了类型兼容性检查的速度。

TypeScript是一个结构类型系统，所谓结构类型，就是类型的兼容性是基于其结构和成员的相似性，而不是完全靠类型的名称和声明。
因此TypeScript需要挨个遍历每个成员进行比对，这个遍历还是挺耗时间的，如果有递归嵌套式的类型那就更是如此。
举例如下：

interface A {
    value: A;
    other: string;
}

interface B {
    value: B;
    other: number;
}

当TypeScript要检查A类型和B类型是否兼容时，就得先检查value再检查other，这时value的类型存在递归的情况，TypeScript就得检测出这种循环的存在，及时停止，继续检查下一个成员。

之前的TypeScript版本使用了栈的形式来记录类型的关系，然后遍历栈来确定类型之间是否有关联。堆栈浅的时候问题不大，堆栈深了就会有性能问题。

TypeScript 5.2 对这个问题进行了算法和数据结构的优化，当类型关联较深时，类型检查效率会有一个提升。

这一点可能跟我们开发人员关系并不是特别大，咱们知道TypeScript 5.2 在类型检查方面有性能改善就可以了。其实这种改善会不会带来新的问题也是未可知。

lib.d.ts中的DOM类型有变化（不能向后兼容）

对DOM的类型进行了更新：

URL添加了canParse方法：URL.canParse(url: string | URL, base?: string): boolean;
给DOM的autocomplete属性添加了AutoFIll类型，大家更新到新版TypeScript后，可以点击某个DOM对象进去看一下AutoFill的定义，在lib.dom.d.ts中。
添加了WebTransport类型，WebTransport是和HTTP/3相关的新API。咱们会在另一篇文章单独讲。
对Popover进行了类型支持。Popover是和弹出框相关的新DOM特性。咱们也会在另一篇文章讲解。
对ToggleEvent进行类型支持。ToggleEvent是和Popover配合使用的事件类型。咱们也会在另一篇文章讲解。
URLSearchParams添加了size和delete/has，还添加了第二个可选参数。
·WASM的Global interface添加了类型参数T extends ValueType = ValueType，ValueType的声明：type ValueType = "anyfunc" | "externref" | "f32" | "f64" | "i32" | "i64" | "v128"。

module关键字被namespace替换

TypeScript中时常会像下面这样用module关键字来定一个模块：

module foo {
    export function f() {}
}

起初TypeScript团队以为module关键字很有可能会成为ECMASCript的标准，所以TypeScript中用了module关键字。
但是后来ECMAScript采用了ES6的方案，并没有使用module。
TypeScript从5.2开始将总是使用namespace关键字。

举例如下：

module foo {
    export function f() {}
}

当生成声明文件时，声明文件将变成这样：

declare namespace foo {
    function f(): void;
}

不过需要说明的是，环境模块声明不受影响：

// 不受影响
declare module "some-module-path" {
    // ...
}

结束语

至此TypeScript 5.2 的讲解就结束了。其实我们并没有按照TypeScript官方的声明将改动全部在这里列出。因为我们觉得有的改动对开发者关系不大，列出来只会增加大家的阅读成本。

原文链接：https://juejin.cn/post/7328335887016460322 作者：吉灵云