譯者 | 禾木木 責編 | 夏萌

出品 | 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