譯者 | 禾木木 責(zé)編 | 夏萌

出品 | CSDN（ID：CSDNnews）

(資料圖片僅供參考)

近日，微軟宣布正式發(fā)布 TypeScript 5.1 版本。

如果你還不熟悉 TypeScript，它是一種建立在 JavaScript 基礎(chǔ)上的語(yǔ)言，通過(guò)添加靜態(tài)類(lèi)型語(yǔ)法來(lái)構(gòu)建的語(yǔ)言。這些類(lèi)型可以描述我們程序的一些細(xì)節(jié)，可以使用 TypeScript 對(duì)代碼進(jìn)行類(lèi)型檢查，并在運(yùn)行代碼之前告訴你代碼錯(cuò)誤的相關(guān)信息。

此外，你還可以使用 TypeScript 編譯器從代碼中剝離類(lèi)型，并為你提供可在任何地方運(yùn)行的簡(jiǎn)潔易讀的 JavaScript 代碼。除了類(lèi)型檢查之外，TypeScript 還使用靜態(tài)類(lèi)型來(lái)支持強(qiáng)大的編輯器工具，例如自動(dòng)完成、代碼導(dǎo)航、重構(gòu)等。

如果你在 Visual Studio Code 或 Visual Studio 這樣的編輯器中使用過(guò) JavaScript，那么你已經(jīng)用上了類(lèi)型和 TypeScript 帶來(lái)的體驗(yàn)。

如果你已經(jīng)在項(xiàng)目中使用 TypeScript，則可以通過(guò) NuGet 獲取它，也可以通過(guò)以下命令使用 npm 獲取：

npm install -D typescript

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

更容易實(shí)現(xiàn) undefined 函數(shù)的返回值類(lèi)型

getter 和 setter 支持設(shè)置不同類(lèi)型

JSX 元素和 JSX 標(biāo)簽類(lèi)型之間解耦類(lèi)型檢查

帶命名空間的 JSX 標(biāo)簽

typeRoots 在模塊解析中被查詢(xún)

JSX 標(biāo)簽支持鏈接光標(biāo)

@Param JSDoc 標(biāo)簽中支持代碼補(bǔ)全

優(yōu)化

重大變更

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

Beta 版以后，糾正了裝飾器中 init 鉤子的一些行為，并作出調(diào)整。還對(duì) isolatedModules 下的 emit 行為進(jìn)行了修改，以確保腳本文件不會(huì)被重寫(xiě)為模塊。這也意味著使用 transpileModule API 不會(huì)將腳本文件被解釋為模塊，因?yàn)樗俣ㄊ褂昧?isolatedModules。

RC 版以后，對(duì)內(nèi)置重構(gòu)進(jìn)行了輕微的迭代。但，實(shí)現(xiàn)仍然需要一些改進(jìn)。因此，你現(xiàn)在可能無(wú)法在大多數(shù)編輯器中訪(fǎng)問(wèn)它，只能通過(guò)使用 TypeScript 的夜間版本來(lái)選擇。預(yù)計(jì) TypeScript 5.2 或 TypeScript 5.1 的未來(lái)補(bǔ)丁版本將重新引入這種重構(gòu)。

更容易實(shí)現(xiàn) undefined 函數(shù)的返回值類(lèi)型

在 JavaScript 中，如果函數(shù)在執(zhí)行過(guò)程中沒(méi)有返回值，就會(huì)返回 undefined：

function foo ( ) { // no return}

// x = undefinedlet x = foo ( ) ;

然而，在以前版本的 TypeScript 中，只有返回值類(lèi)型為 void 和 any 的函數(shù)可以沒(méi)有 return 語(yǔ)句。這意味著即使明確知道這個(gè)函數(shù)是返回 undefined 的，也需要至少有一個(gè) return 語(yǔ)句。

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

如果某個(gè) API 希望函數(shù)返回 undefined。在以前的版本中，可能需要顯式返回一個(gè) undefined 或者顯式添加一個(gè) return 語(yǔ)句。

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

這種行為令人困惑，尤其是在調(diào)用無(wú)法控制的函數(shù)時(shí)。理解推斷 void 和 undefined 之間的相互作用，以及一個(gè)返回 undefined 的函數(shù)是否需要一個(gè) return 語(yǔ)句等。

在 TypeScript 5.1 中，允許返回 undefined 的函數(shù)沒(méi)有 return 語(yǔ)句。如下所示：

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

如果函數(shù)沒(méi)有 return 并且被傳遞給期望返回 undefined 的函數(shù)參數(shù)，TypeScript 會(huì)推斷該函數(shù)的返回類(lèi)型為 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;} ) ;

為了解決另一個(gè)類(lèi)似的痛點(diǎn)，在 TypeScript 的 --noImplicitReturns 選項(xiàng)下，僅返回 undefined 的函數(shù)現(xiàn)在具有與 void 類(lèi)似的異常，因?yàn)椴⒎敲總€(gè)代碼路徑都必須以顯式 return 結(jié)束。

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

getter 和 setter 支持設(shè)置不同類(lèi)型

TypeScript 4.3 使得 get 和 set 訪(fǎng)問(wèn)器對(duì)可以指定兩種不同的類(lèi)型成為可能。

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 類(lèi)型必須是 set 類(lèi)型的子類(lèi)型。意味著以下的代碼是合理的：

box.value = box.value;

但是，有許多現(xiàn)有的和提議的 API 在它們的 getter 和 setter 之間具有完全不相關(guān)的類(lèi)型。

TypeScript 5.1 現(xiàn)在允許 get 和 set 訪(fǎng)問(wèn)器屬性設(shè)置不同的類(lèi)型，前提是它們具有顯式類(lèi)型注釋。雖然此版本的 TypeScript 尚未更改這些內(nèi)置接口的類(lèi)型，但現(xiàn)在可以通過(guò)以下方式定義：

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

也允許其他模式的使用，但如果某些基礎(chǔ)狀態(tài)尚未初始化，則訪(fǎng)問(wèn)器可以返回。

class SafeBox { #value: string | undefined;

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

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

實(shí)際上，這與在 --exactOptionalProperties 下檢查可選屬性的方式類(lèi)似。

JSX 元素和 JSX 標(biāo)簽類(lèi)型之間解耦類(lèi)型檢查

TypeScript 在處理 JSX 時(shí)的一個(gè)痛點(diǎn)是對(duì)每個(gè) JSX 元素標(biāo)簽類(lèi)型的要求。而這個(gè)版本使得 JSX 庫(kù)能夠更準(zhǔn)確地描述 JSX 組件的返回類(lèi)型。對(duì)于很多人來(lái)說(shuō)，這具體意味著可以在 React 中使用異步服務(wù)器組件。

例如，有以下 JSX 元素：

// A self-closing JSX tag

// A regular element with an opening/closing tag

當(dāng)對(duì) 或 進(jìn)行類(lèi)型檢查時(shí)，TypeScript 總是會(huì)查找名為 JSX 的命名空間，并從中獲取一個(gè)名為 Element 的類(lèi)型，也就是在查找 JSX.Element。

但是，為了檢查 Foo 或 Bar 本身是否是有效的標(biāo)簽名稱(chēng)，TypeScript 會(huì)粗略地獲取由 Foo 或 Bar 返回或構(gòu)造的類(lèi)型，并檢查與 JSX.Element 的兼容性（或者如果類(lèi)型是可構(gòu)造的，則檢查另一種稱(chēng)為 JSX.ElementClass 的類(lèi)型）。

這個(gè)限制意味著如果組件返回比 JSX.Element 更廣泛的類(lèi)型，則無(wú)法使用組件。

舉一個(gè)具體的例子，React 的未來(lái)版本提議對(duì)返回 Promise 的組件提供有限支持，但是現(xiàn)有版本的 TypeScript 無(wú)法表達(dá)這種類(lèi)型，除非徹底放寬 JSX.Element 的類(lèi)型限制。

import * as React from "react";

async function Foo ( ) { return