15個Typescript 5.0 中重要的新功能快速了解一下

作者：佚名 2023-04-23 14:55:10

作為一種在開發(fā)人員中越來越受歡迎的編程語言，TypeScript 不斷發(fā)展，帶來了大量的改進和新功能。在本文中，我們將深入研究 TypeScript 的最新迭代版本 5.0，并探索其最值得注意的更新。

1.裝飾器

TypeScript 5.0 引入了改進的裝飾器系統(tǒng)，改進了類型檢查和元數(shù)據(jù)生成。裝飾器現(xiàn)在可以更無縫地與類型系統(tǒng)一起工作，使您能夠編寫更清晰、更健壯的代碼。下面是方法裝飾器如何工作的一個簡單示例：

function log<This, Args extends any[], Return>(
  target: (this: This, ...args: Args) => Return,
  context: ClassMethodDecoratorContext<
    This,
    (this: This, ...args: Args) => Return
  >
) {
  const methodName = String(context.name);


  function replacementMethod(this: This, ...args: Args): Return {
    console.log(`LOG: Entering method '${methodName}'.`);
    const result = target.call(this, ...args);
    console.log(`LOG: Exiting method '${methodName}'.`);
    return result;
  }


  return replacementMethod;
}


class Calculator {
  @log
  add(a: number, b: number): number {
    return a + b;
  }
}


const calculator = new Calculator();
console.log(calculator.add(2, 3)); 
// "LOG: Entering method 'add'." 
// "LOG: Exiting method 'add'." 
// 5

在此示例中，@log 裝飾器會在每次調(diào)用方法時記錄方法名稱。除了方法裝飾器，TypeScript 5.0 還支持自動訪問器裝飾器、Getter 和 Setter 裝飾器等。

2. const 類型參數(shù)

在 TypeScript 5.0 之前，其推理通常會選擇更通用的類型，例如將 ["Alice", "Bob", "Eve"] 推斷為 string[]，如果您想要更具體的類型，則必須為其添加 as const：

// string[]
const a = ["Alice", "Bob", "Eve"]


// readonly ["Alice", "Bob", "Eve"]
const b = ["Alice", "Bob", "Eve"] as const

TypeScript 5.0 允許您將 const 修飾符添加到類型參數(shù)聲明中：

declare function fnGood<const T extends readonly string[]>(args: T): void;


// T is readonly ["a", "b", "c"]
fnGood(["a", "b" ,"c"]);

但請記住，const 修飾符僅影響在調(diào)用中編寫的對象、數(shù)組和原始表達式的推斷，因此不會（或不能）用 as const 修改的參數(shù)將看不到任何行為改變：

declare function fnGood<const T extends readonly string[]>(args: T): void;
const arr = ["a", "b" ,"c"];


// 'T' is still 'string[]'-- the 'const' modifier has no effect here
fnGood(arr);

3. extends支持多配置文件

TypeScript 5.0 帶來了在 tsconfig.json 中擴展多個配置文件的能力。此功能使跨項目共享和管理配置變得更加容易。以下是如何使用多個配置文件的示例：

{
  "extends": ["./config/base", "./config/jest"],
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true
  }
}

在此示例中，配置文件擴展了基本配置和玩笑配置，允許您根據(jù)需要組合和覆蓋設置。

4. 所有枚舉都是聯(lián)合枚舉

在 TypeScript 5.0 中，所有枚舉現(xiàn)在都被視為聯(lián)合枚舉。聯(lián)合枚舉為使用枚舉值提供了更好的類型安全性和改進的人體工程學。這是一個例子：

enum E {
  A = 10 * 10, // Numeric literal enum member
  B = 'foo', // String literal enum member
  C = Math.random(), // Opaque computed enum member
}


function getStringValue(e: E): string {
  return String(e);
}


const val = getStringValue(E.A); // "100"

TypeScript 5.0 通過為每個計算成員創(chuàng)建唯一類型，設法將所有枚舉變成聯(lián)合枚舉。這意味著現(xiàn)在可以縮小所有枚舉的范圍，并將其成員也作為類型引用。

5. — moduleResolution 捆綁器

TypeScript 5.0 引入了一種新的模塊解析策略，稱為 bundler。此策略旨在與 Webpack 和 Rollup 等捆綁器一起使用，從而實現(xiàn)更高效和簡化的構(gòu)建過程（就像過去 Node.js 模塊中的任何相關導入一樣，需要包含文件擴展名）。

要啟用 bundler 模塊解析策略，請在 tsconfig.json 中使用以下配置：

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

6.自定義分辨率標志

TypeScript 5.0 添加了幾個新標志來自定義模塊解析過程。這些標志對如何解析模塊提供了更精細的控制，使您可以微調(diào)構(gòu)建過程。

以下是簡要概述：

--allowImportingTsExtensions：允許導入帶有 TypeScript 特定擴展名的 TypeScript 文件，例如 .ts、.mts 或 .tsx。
--resolvePackageJsonExports：強制 TypeScript 在從 node_modules 中讀取包時查詢 package.json 文件的導出字段。
--resolvePackageJsonImports：強制 TypeScript 在執(zhí)行以 # 開頭的查找時查詢 package.json 文件的導入字段。
--allowArbitraryExtensions：允許通過查找 {file basename}.d.{extension}.ts 形式的聲明文件來導入具有未知擴展名的文件。
--customConditions：獲取當 TypeScript 從 package.json 的導出或?qū)胱侄谓馕鰰r要考慮的附加條件列表。

7. — verbatimModuleSyntax

TypeScript 5.0 中新的 --verbatimModuleSyntax 標志允許您在發(fā)出 JavaScript 代碼時保留原始模塊語法。此功能在使用捆綁器時特別有用，因為它不需要額外的轉(zhuǎn)換。例如：

// Erased away entirely.
import type { A } from "a";


// Rewritten to 'import { b } from "bcd";'
import { b, type c, type d } from "bcd";


// Rewritten to 'import {} from "xyz";'
import { type xyz } from "xyz";

要啟用此標志，請將其添加到您的 tsconfig.json 中：

{
  "compilerOptions": {
    "verbatimModuleSyntax": true
  }
}

8.支持 export type*

TypeScript 5.0 引入了對 export type * 語法的支持，它允許您從另一個模塊重新導出所有類型。

此語法對于創(chuàng)建僅類型模塊或聚合來自多個來源的類型特別有用。

這是一個例子：

// types.ts
export type { Foo } from './foo';
export type { Bar } from './bar';


// index.ts
export type * from './types';
// Also support
export type * as Types from './types';

在此示例中，使用 export type * 語法將 types.ts 模塊中的所有類型重新導出到 index.ts 模塊中。

9. JSDoc 中的@satisfies 支持

TypeScript 5.0 中新的@satisfies JSDoc 標記使您能夠指定函數(shù)實現(xiàn)滿足特定接口。在使用結(jié)構(gòu)類型或使用 TypeScript 對 JavaScript 代碼進行類型檢查時，此功能特別有用。

這是一個例子：

// interface Greeter {
//   greet(name: string): number;
// }


/**
 * @typedef {Function} Greeter
 * @param {string} name
 * @returns {string}
 */


/**
 * @satisfies {Greeter}
 */
function greeter(name: string) {
  return `Hello, ${name}!`;
}

在這個例子中，greeter 函數(shù)被標記為@satisfies JSDoc 標簽，表明它滿足 Greeter 接口。

10. JSDoc 中的@overload 支持

TypeScript 5.0 添加了對 @overload JSDoc 標記的支持，允許您在 JavaScript 代碼中為單個實現(xiàn)定義多個函數(shù)簽名。

在處理需要支持多種參數(shù)類型或形狀的復雜函數(shù)時，此功能特別有用。

這是一個例子：

/**
 * @overload
 * @param {string} a
 * @param {string} b
 * @return {string}
 */


/**
 * @overload
 * @param {number} a
 * @param {number} b
 * @return {number}
 */


/**
 * @param {string | number} a
 * @param {string | number} b
 */
export function add(a, b) {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  } else if (typeof a === 'string' && typeof b === 'string') {
    return a.concat(b);
  }
}


const numResult = add(1, 2); // 3
const strResult = add('hello', 'world'); // "helloworld"
const errResult = add('hello', 123); // Error: No overload matches this call.

在此示例中，add 函數(shù)標有兩個 @overload JSDoc 標記，指定它可以處理數(shù)字和字符串作為參數(shù)。

11. 在 — build 下傳遞特定于發(fā)射的標志

TypeScript 5.0 引入了在使用 --build 標志時傳遞 emit-specific 標志的能力。此功能允許您在構(gòu)建項目時微調(diào)項目的輸出，從而更好地控制構(gòu)建過程。部分消息：

--declaration：從項目中的 TypeScript 和 JavaScript 文件生成 .d.ts 文件。
--emitDeclarationOnly：只輸出 d.ts 文件，不輸出 JavaScript 文件。
--declarationMap：為 d.ts 文件創(chuàng)建 sourcemaps。
--sourceMap：為發(fā)出的 JavaScript 文件創(chuàng)建源映射文件。
--inlineSourceMap：在發(fā)出的 JavaScript 中包含源映射文件。

12. 編輯器中不區(qū)分大小寫的導入排序

TypeScript 5.0 通過不區(qū)分大小寫改進了編輯器中的導入排序。在組織導入時，此更改會導致更自然和直觀的排序順序，從而使代碼更清晰、更易讀。

13. 詳盡的開關/外殼完成

TypeScript 5.0 通過提供詳盡的 switch/case 補全增強了代碼補全體驗。在處理聯(lián)合類型時，編輯器現(xiàn)在可以建議所有可能的情況，減少遺漏情況的機會，并使編寫全面的 switch 語句變得更加容易。這是一個例子：

type Animal = "cat" | "dog" | "fish";


function speak(animal: Animal): string {
  switch (animal) {
    // TypeScript 5.0 will suggest all possible cases: "cat", "dog", "fish"
  }
}

14. 速度、內(nèi)存和包大小優(yōu)化

TypeScript 5.0 帶來了各種性能優(yōu)化，包括更快的類型檢查、更少的內(nèi)存使用和更小的包大小。這些改進使使用 TypeScript 變得更加愉快，確保了流暢高效的開發(fā)體驗。

15.重大變更和棄用

與任何主要版本一樣，TypeScript 5.0 引入了一些重大更改和棄用。在升級之前查看發(fā)行說明并徹底測試您的項目至關重要。

一些顯著的重大變化包括：

運行時要求：TypeScript 現(xiàn)在以 ECMAScript 2018 為目標。TypeScript 包還設置了最低預期引擎 12.20。對于 Node 用戶，這意味著 TypeScript 5.0 的最低版本要求至少為 Node.js 12.20 及更高版本。
lib.d.ts 更改：更改 DOM 類型的生成方式可能會對現(xiàn)有代碼產(chǎn)生影響。值得注意的是，某些屬性已從數(shù)字轉(zhuǎn)換為數(shù)字文字類型，并且用于剪切、復制和粘貼事件處理的屬性和方法已跨接口移動。
API 重大更改：移至模塊，刪除了一些不必要的接口并進行了一些正確性改進。
關系運算符中禁止的隱式強制轉(zhuǎn)換：

function func1(ns: number | string) {
  return ns * 4; // Error, possible implicit coercion
}


function func2(ns: number | string) {
  return ns > 4; // Error, possible implicit coercion
}


function func3(ns: number | string) {
  return +ns > 4; // OK
}

Enum Overhaul：在 TypeScript 5.0 中你不會看到那些奇怪的 enum 問題，這里有兩個重要的錯誤改進：

// Part1: Assigning an out-of-domain literal to an enum type 
// now errors out as one would expect.
enum SomeEvenDigit {
  Zero = 0,
  Two = 2,
  Four = 4,
}


// Now correctly an error
let m: SomeEvenDigit = 1;


// Part2: Enums declaring values with mixed numeric and 
// indirect string enum references incorrectly create an all-numeric enum.
enum Letters {
  A = 'a',
}
enum Numbers {
  one = 1,
  two = Letters.A,
}


// Now correctly an error
const t: number = Numbers.two;

對構(gòu)造函數(shù)中的參數(shù)裝飾器進行更準確的類型檢查 — experimentalDecorators

一些已棄用的配置和配置值。

結(jié)論

總之，TypeScript 5.0 帶來了許多新功能，那么，您覺得哪個功能最有用？

責任編輯：華軒來源： web前端開發(fā)

開發(fā)TypeScript 裝飾器