探索最令人興奮的功能和更新

作為一種不斷發(fā)展的編程語(yǔ)言，TypeScript 帶來(lái)了大量的改進(jìn)和新功能。在本文中，我們將深入探討 TypeScript 的最新版本 5.0，并探索其最值得關(guān)注的更新。

1. 裝飾器

TypeScript 5.0 引入了一個(gè)重新設(shè)計(jì)的裝飾器系統(tǒng)，改進(jìn)了類型檢查和元數(shù)據(jù)生成。裝飾器現(xiàn)在更加無(wú)縫地與類型系統(tǒng)配合，使您能夠編寫(xiě)更干凈、更健壯的代碼。以下是一個(gè)簡(jiǎn)單的方法裝飾器的示例：

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 

在這個(gè)例子中，@log?裝飾器在每次調(diào)用方法時(shí)記錄方法名。除了方法裝飾器，TypeScript 5.0 還支持自動(dòng)訪問(wèn)器裝飾器、getter 和 setter 裝飾器等。您可以在這個(gè)快速指南中了解更多：

TypeScript 5.0 裝飾器快速指南

使用裝飾器擴(kuò)展您的 TypeScript 5.0 工具包

2. const 類型參數(shù)

在 TypeScript 5.0 之前，它的推斷通常會(huì)選擇更一般的類型，例如將?["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 允許您在類型參數(shù)聲明中添加?const?修飾符：

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

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

但請(qǐng)記住，const?修飾符僅影響在調(diào)用中編寫(xiě)的對(duì)象、數(shù)組和原始表達(dá)式的推斷，因此無(wú)法（或無(wú)法）通過(guò)?as const?修改的參數(shù)不會(huì)看到任何行為上的變化：

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 中使用多個(gè)配置文件

TypeScript 5.0 可以在您的?tsconfig.json?中擴(kuò)展多個(gè)配置文件。此功能使得在項(xiàng)目之間共享和管理配置更加容易。以下是如何使用多個(gè)配置文件的示例：

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

在這個(gè)例子中，配置文件擴(kuò)展了?base?和?jest?配置，允許您根據(jù)需要組合和覆蓋設(shè)置。

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

在 TypeScript 5.0 中，所有枚舉現(xiàn)在都被視為聯(lián)合枚舉。聯(lián)合枚舉提供了更好的類型安全性和更好的人機(jī)工程學(xué)，以處理枚舉值。以下是一個(gè)示例：

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 通過(guò)為每個(gè)計(jì)算成員創(chuàng)建唯一類型來(lái)將所有枚舉轉(zhuǎn)換為聯(lián)合枚舉。這意味著現(xiàn)在所有枚舉都可以被縮小并且其成員也可以被引用為類型。

5. — moduleResolution bundler

TypeScript 5.0 引入了一個(gè)名為 bundler 的新模塊解析策略。這個(gè)策略旨在與打包程序（如 Webpack 和 Rollup）配合使用，從而實(shí)現(xiàn)更高效、更流暢的構(gòu)建過(guò)程（就像過(guò)去在 Node.js 模塊中的任何相對(duì)導(dǎo)入都需要包括文件擴(kuò)展名一樣）。 要啟用 bundler 模塊解析策略，請(qǐng)?jiān)?tsconfig.json?中使用以下配置：

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

6. 解析自定義標(biāo)志

TypeScript 5.0 添加了幾個(gè)新標(biāo)志來(lái)自定義模塊解析過(guò)程。這些標(biāo)志提供了更細(xì)粒度的控制，以控制模塊是如何解析的，使您能夠微調(diào)構(gòu)建過(guò)程。以下是一個(gè)簡(jiǎn)要概述：

• --allowImportingTsExtensions：允許導(dǎo)入帶有 TypeScript 特定擴(kuò)展名（如 .ts、.mts 或 .tsx）的 TypeScript 文件。
• --resolvePackageJsonExports：強(qiáng)制 TypeScript 在從 node_modules 中的包中讀取時(shí)，查看 package.json 文件的 exports 字段。
• --resolvePackageJsonImports：強(qiáng)制 TypeScript 在從以 # 開(kāi)頭的查找開(kāi)始時(shí)，查看 package.json 文件的 imports 字段。
• --allowArbitraryExtensions：允許通過(guò)查找以 {file basename}.d.{extension}.ts 格式的聲明文件來(lái)導(dǎo)入具有未知擴(kuò)展名的文件。
• --customConditions：在 TypeScript 從 package.json 的 exports 或 imports 字段解析時(shí)，采用額外的條件列表。

7. --verbatimModuleSyntax

TypeScript 5.0 中的新?--verbatimModuleSyntax?標(biāo)志允許您在發(fā)出 JavaScript 代碼時(shí)保留原始模塊語(yǔ)法。這個(gè)特性在與打包程序一起工作時(shí)特別有用，因?yàn)樗梢苑乐剐枰~外的轉(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";

要啟用此標(biāo)志，請(qǐng)將其添加到您的?tsconfig.json：

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

8. 支持 export type *

TypeScript 5.0 引入了對(duì)?export type *?語(yǔ)法的支持，允許您重新導(dǎo)出另一個(gè)模塊中的所有類型。這種語(yǔ)法特別適用于創(chuàng)建僅包含類型的模塊或聚合來(lái)自多個(gè)源的類型。以下是一個(gè)示例：

// 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';

在這個(gè)例子中，index.ts?模塊使用?export type *?語(yǔ)法重新導(dǎo)出了?types.ts?模塊中的所有類型。

9. JSDoc 中的 @satisfies 支持

TypeScript 5.0 中的新?@satisfies?JSDoc 標(biāo)簽使您能夠指定函數(shù)實(shí)現(xiàn)滿足特定接口。這個(gè)特性在使用結(jié)構(gòu)類型或使用 TypeScript 對(duì) JavaScript 代碼進(jìn)行類型檢查時(shí)特別有用。以下是一個(gè)示例：

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

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

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

在這個(gè)例子中，greeter?函數(shù)帶有?@satisfies?JSDoc 標(biāo)簽，表示它滿足?Greeter?接口。

10. JSDoc中的@overload支持

TypeScript 5.0添加了對(duì)@overload JSDoc標(biāo)簽的支持，允許您為JavaScript代碼中的單個(gè)實(shí)現(xiàn)定義多個(gè)函數(shù)簽名。當(dāng)處理需要支持多種參數(shù)類型或形狀的復(fù)雜函數(shù)時(shí)，此功能特別有用。以下是一個(gè)示例：

/**
 * @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ù)用兩個(gè)@overload JSDoc標(biāo)記標(biāo)記，指定它可以處理數(shù)字和字符串作為參數(shù)。

11. 在--build下傳遞特定于emit的標(biāo)志

TypeScript 5.0引入了在使用--build標(biāo)志時(shí)傳遞特定于emit的標(biāo)志的能力。此功能允許您在構(gòu)建項(xiàng)目時(shí)微調(diào)輸出，從而對(duì)構(gòu)建過(guò)程進(jìn)行更精細(xì)的控制。一些新聞：

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

12. 編輯器中的大小寫(xiě)不敏感導(dǎo)入排序

TypeScript 5.0通過(guò)使導(dǎo)入排序不區(qū)分大小寫(xiě)來(lái)改進(jìn)編輯器中的導(dǎo)入排序。這種改變導(dǎo)致組織導(dǎo)入時(shí)出現(xiàn)更自然和直觀的排序順序，從而產(chǎn)生更清晰和可讀的代碼。

13. 完整的switch/case自動(dòng)完成

TypeScript 5.0通過(guò)提供完整的switch/case自動(dòng)完成增強(qiáng)了代碼完成體驗(yàn)。在使用聯(lián)合類型時(shí)，編輯器現(xiàn)在可以建議所有可能的情況，減少錯(cuò)過(guò)情況的機(jī)會(huì)，使編寫(xiě)全面的switch語(yǔ)句更容易。以下是一個(gè)示例：

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帶來(lái)了各種性能優(yōu)化，包括更快的類型檢查、減少的內(nèi)存使用和更小的包大小。這些改進(jìn)使使用TypeScript更加愉快，確保平穩(wěn)高效的開(kāi)發(fā)體驗(yàn)。

15. 破壞性變化和棄用

與任何主要版本發(fā)布一樣，TypeScript 5.0引入了一些破壞性變化和棄用。在升級(jí)之前，仔細(xì)查看發(fā)行說(shuō)明并徹底測(cè)試您的項(xiàng)目是至關(guān)重要的。一些值得注意的破壞性變化包括：

• 運(yùn)行時(shí)要求：TypeScript現(xiàn)在針對(duì)ECMAScript 2018。TypeScript包還設(shè)置了最低期望引擎為12.20。對(duì)于Node用戶，這意味著TypeScript 5.0的最低版本要求至少是Node.js 12.20及更高版本。
• lib.d.ts更改：對(duì)如何生成DOM類型的更改可能會(huì)對(duì)現(xiàn)有代碼產(chǎn)生影響。值得注意的是，某些屬性已從number轉(zhuǎn)換為數(shù)字文字類型，并且有關(guān)剪切、復(fù)制和粘貼事件處理的屬性和方法已移動(dòng)到不同的接口。
• API Breaking Changes：已移至模塊，刪除了一些不必要的接口并進(jìn)行了一些正確性改進(jìn)。
• 禁止在關(guān)系運(yùn)算符中進(jìn)行隱式強(qiáng)制類型轉(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
}

• 枚舉重大改進(jìn)：在TypeScript 5.0中，您將不會(huì)看到那些枚舉奇怪的問(wèn)題，以下是兩個(gè)重要的錯(cuò)誤改進(jìn)：

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

• 在—experimentalDecorators下更準(zhǔn)確的參數(shù)裝飾器類型檢查（在構(gòu)造函數(shù)中）
• 一些已棄用的配置和配置值

結(jié)論

總之，TypeScript 5.0帶來(lái)了許多功能和改進(jìn)，那么哪個(gè)功能最有用呢？文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-454388.html

到了這里，關(guān)于Typescript 5.0 發(fā)布：快速概覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！