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

出品 | CSDN（ID：CSDNnews）

(資料圖片僅供參考)

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

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

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

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

如果你已經(jīng)在項目中使用 TypeScript，則可以通過 NuGet 獲取它，也可以通過以下命令使用 npm 獲?。?/p>

npm install -D typescript

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

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

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

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

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

typeRoots 在模塊解析中被查詢

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

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

優(yōu)化

重大變更

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

Beta 版以后，糾正了裝飾器中 init 鉤子的一些行為，并作出調(diào)整。還對 isolatedModules 下的 emit 行為進行了修改，以確保腳本文件不會被重寫為模塊。這也意味著使用 transpileModule API 不會將腳本文件被解釋為模塊，因為它假定使用了 isolatedModules。

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

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

在 JavaScript 中，如果函數(shù)在執(zhí)行過程中沒有返回值，就會返回 undefined：

function foo ( ) { // no return}

// x = undefinedlet x = foo ( ) ;

然而，在以前版本的 TypeScript 中，只有返回值類型為 void 和 any 的函數(shù)可以沒有 return 語句。這意味著即使明確知道這個函數(shù)是返回 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 希望函數(shù)返回 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;} ) ;

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

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

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

如果函數(shù)沒有 return 并且被傳遞給期望返回 undefined 的函數(shù)參數(shù)，TypeScript 會推斷該函數(shù)的返回類型為 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 的函數(shù)現(xiàn)在具有與 void 類似的異常，因為并非每個代碼路徑都必須以顯式 return 結(jié)束。

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

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

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;

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

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

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

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

class SafeBox { #value: string | undefined;

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

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

實際上，這與在 --exactOptionalProperties 下檢查可選屬性的方式類似。

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

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

例如，有以下 JSX 元素：

// A self-closing JSX tag

// A regular element with an opening/closing tag

當(dāng)對 或 進行類型檢查時，TypeScript 總是會查找名為 JSX 的命名空間，并從中獲取一個名為 Element 的類型，也就是在查找 JSX.Element。

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

這個限制意味著如果組件返回比 JSX.Element 更廣泛的類型，則無法使用組件。

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

import * as React from "react";

async function Foo ( ) { return