环球热议:函数返回值类型优化，JSX 增强，TypeScript 5.1 发布！

译者 | 禾木木 责编 | 夏萌

出品 | CSDN（ID：CSDNnews）

(资料图片仅供参考)

近日，微软宣布正式发布 TypeScript 5.1 版本。

如果你还不熟悉 TypeScript，它是一种建立在 JavaScript 基础上的语言，通过添加静态类型语法来构建的语言。这些类型可以描述我们程序的一些细节，可以使用 TypeScript 对代码进行类型检查，并在运行代码之前告诉你代码错误的相关信息。

此外，你还可以使用 TypeScript 编译器从代码中剥离类型，并为你提供可在任何地方运行的简洁易读的 JavaScript 代码。除了类型检查之外，TypeScript 还使用静态类型来支持强大的编辑器工具，例如自动完成、代码导航、重构等。

如果你在 Visual Studio Code 或 Visual Studio 这样的编辑器中使用过 JavaScript，那么你已经用上了类型和 TypeScript 带来的体验。

如果你已经在项目中使用 TypeScript，则可以通过 NuGet 获取它，也可以通过以下命令使用 npm 获取：

npm install -D typescript

以下是 TypeScript 5.1 版本中新增的主要功能：

更容易实现 undefined 函数的返回值类型

getter 和 setter 支持设置不同类型

JSX 元素和 JSX 标签类型之间解耦类型检查

带命名空间的 JSX 标签

typeRoots 在模块解析中被查询

JSX 标签支持链接光标

@Param JSDoc 标签中支持代码补全

优化

重大变更

Beta 版本和 RC 版有哪些新变化？

Beta 版以后，纠正了装饰器中 init 钩子的一些行为，并作出调整。还对 isolatedModules 下的 emit 行为进行了修改，以确保脚本文件不会被重写为模块。这也意味着使用 transpileModule API 不会将脚本文件被解释为模块，因为它假定使用了 isolatedModules。

RC 版以后，对内置重构进行了轻微的迭代。但，实现仍然需要一些改进。因此，你现在可能无法在大多数编辑器中访问它，只能通过使用 TypeScript 的夜间版本来选择。预计 TypeScript 5.2 或 TypeScript 5.1 的未来补丁版本将重新引入这种重构。

更容易实现 undefined 函数的返回值类型

在 JavaScript 中，如果函数在执行过程中没有返回值，就会返回 undefined：

function foo ( ) { // no return}

// x = undefinedlet x = foo ( ) ;

然而，在以前版本的 TypeScript 中，只有返回值类型为 void 和 any 的函数可以没有 return 语句。这意味着即使明确知道这个函数是返回 undefined 的，也需要至少有一个 return 语句。

// fine - we inferred that "f1" returns "void"function f1 ( ) { // no returns}

// fine - "void" doesn"t need a return statementfunction f2 ( ) : void { // no returns}

// fine - "any" doesn"t need a return statementfunction f3 ( ) : any { // no returns}

// error!// A function whose declared type is neither "void" nor "any" must return a value.function f4 ( ) : undefined { // no returns}

如果某个 API 希望函数返回 undefined。在以前的版本中，可能需要显式返回一个 undefined 或者显式添加一个 return 语句。

declare function takesFunction ( f: ( ) => undefined ) : undefined;

// error! // Argument of type " ( ) => void" is not assignable to parameter of type " ( ) => undefined".takesFunction ( ( ) => { // no returns} ) ;

// error!// A function whose declared type is neither "void" nor "any" must return a value.takesFunction ( ( ) : undefined => { // no returns} ) ;

// error!// Argument of type " ( ) => void" is not assignable to parameter of type " ( ) => undefined".takesFunction ( ( ) => { return;} ) ;

// workstakesFunction ( ( ) => { return undefined;} ) ;

// works takesFunction ( ( ) : undefined => { return;} ) ;

这种行为令人困惑，尤其是在调用无法控制的函数时。理解推断 void 和 undefined 之间的相互作用，以及一个返回 undefined 的函数是否需要一个 return 语句等。

在 TypeScript 5.1 中，允许返回 undefined 的函数没有 return 语句。如下所示：

// worksfunction f4 ( ) : undefined { // no returns}// workstakesFunction ( ( ) : undefined => { // no returns} ) ;

如果函数没有 return 并且被传递给期望返回 undefined 的函数参数，TypeScript 会推断该函数的返回类型为 undefined。

// Works in TypeScript 5.1!takesFunction ( function f ( ) { // ^ return type is undefined // no returns} ) ;// Works in TypeScript 5.1!takesFunction ( function f ( ) { // ^ return type is undefined return;} ) ;

为了解决另一个类似的痛点，在 TypeScript 的 --noImplicitReturns 选项下，仅返回 undefined 的函数现在具有与 void 类似的异常，因为并非每个代码路径都必须以显式 return 结束。

// Works in TypeScript 5.1 under "--noImplicitReturns"!function f ( ) : undefined { if ( Math.random ( ) ) { // do some stuff... return; }}

getter 和 setter 支持设置不同类型

TypeScript 4.3 使得 get 和 set 访问器对可以指定两种不同的类型成为可能。

interface Serializer { set value ( v: string | number | boolean ) ; get value ( ) : string;}

declare let box: Serializer;

// Allows writing a "boolean"box.value = true;

// Comes out as a "string"console.log ( box.value.toUpperCase ( ) ) ;

最初要求 get 类型必须是 set 类型的子类型。意味着以下的代码是合理的：

box.value = box.value;

但是，有许多现有的和提议的 API 在它们的 getter 和 setter 之间具有完全不相关的类型。

TypeScript 5.1 现在允许 get 和 set 访问器属性设置不同的类型，前提是它们具有显式类型注释。虽然此版本的 TypeScript 尚未更改这些内置接口的类型，但现在可以通过以下方式定义：

interface CSSStyleRule { get style ( ) : CSSStyleDeclaration; set style ( newValue: string ) ;}

也允许其他模式的使用，但如果某些基础状态尚未初始化，则访问器可以返回。

class SafeBox { #value: string | undefined;

// 只接受字符串 set value ( newValue: string ) {

// 必须检查 undefined get value ( ) : string | undefined { return this.#value; }}

实际上，这与在 --exactOptionalProperties 下检查可选属性的方式类似。

JSX 元素和 JSX 标签类型之间解耦类型检查

TypeScript 在处理 JSX 时的一个痛点是对每个 JSX 元素标签类型的要求。而这个版本使得 JSX 库能够更准确地描述 JSX 组件的返回类型。对于很多人来说，这具体意味着可以在 React 中使用异步服务器组件。

例如，有以下 JSX 元素：

// A self-closing JSX tag

// A regular element with an opening/closing tag

当对 或 进行类型检查时，TypeScript 总是会查找名为 JSX 的命名空间，并从中获取一个名为 Element 的类型，也就是在查找 JSX.Element。

但是，为了检查 Foo 或 Bar 本身是否是有效的标签名称，TypeScript 会粗略地获取由 Foo 或 Bar 返回或构造的类型，并检查与 JSX.Element 的兼容性（或者如果类型是可构造的，则检查另一种称为 JSX.ElementClass 的类型）。

这个限制意味着如果组件返回比 JSX.Element 更广泛的类型，则无法使用组件。

举一个具体的例子，React 的未来版本提议对返回 Promise 的组件提供有限支持，但是现有版本的 TypeScript 无法表达这种类型，除非彻底放宽 JSX.Element 的类型限制。

import * as React from "react";

async function Foo ( ) { return