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

英文 | https://levelup.gitconnected.com/typescript-5-0-released-a-quick-overview-3d6bfdf74135

作为一种在开发人员中越来越受欢迎的编程语言，TypeScript 不断发展，带来了大量的改进和新功能。在本文中，我们将深入研究 TypeScript 的最新迭代版本 5.0，并探索其最值得注意的更新。

1.装饰器

TypeScript 5.0 引入了改进的装饰器系统，改进了类型检查和元数据生成。 装饰器现在可以更无缝地与类型系统一起工作，使您能够编写更清晰、更健壮的代码。下面是方法装饰器如何工作的一个简单示例：

代码语言：javascript复制

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 装饰器会在每次调用方法时记录方法名称。除了方法装饰器，TypeScript 5.0 还支持自动访问器装饰器、Getter 和 Setter 装饰器等。

2. const 类型参数

在 TypeScript 5.0 之前，其推理通常会选择更通用的类型，例如 将 ["Alice", "Bob", "Eve"] 推断为 string[]，如果您想要更具体的类型，则必须为其添加 as const：

代码语言：javascript复制

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

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

TypeScript 5.0 允许您将 const 修饰符添加到类型参数声明中：

代码语言：javascript复制

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

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

但请记住，const 修饰符仅影响在调用中编写的对象、数组和原始表达式的推断，因此不会（或不能）用 as const 修改的参数将看不到任何 行为改变：

代码语言：javascript复制

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 中扩展多个配置文件的能力。此功能使跨项目共享和管理配置变得更加容易。以下是如何使用多个配置文件的示例：

代码语言：javascript复制

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

在此示例中，配置文件扩展了基本配置和玩笑配置，允许您根据需要组合和覆盖设置。

4. 所有枚举都是联合枚举

在 TypeScript 5.0 中，所有枚举现在都被视为联合枚举。 联合枚举为使用枚举值提供了更好的类型安全性和改进的人体工程学。 这是一个例子：

代码语言：javascript复制

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 通过为每个计算成员创建唯一类型，设法将所有枚举变成联合枚举。这意味着现在可以缩小所有枚举的范围，并将其成员也作为类型引用。

5. — moduleResolution 捆绑器

TypeScript 5.0 引入了一种新的模块解析策略，称为 bundler。此策略旨在与 Webpack 和 Rollup 等捆绑器一起使用，从而实现更高效和简化的构建过程（就像过去 Node.js 模块中的任何相关导入一样，需要包含文件扩展名）。

要启用 bundler 模块解析策略，请在 tsconfig.json 中使用以下配置：

代码语言：javascript复制

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

6.自定义分辨率标志

TypeScript 5.0 添加了几个新标志来自定义模块解析过程。这些标志对如何解析模块提供了更精细的控制，使您可以微调构建过程。

以下是简要概述：

• --allowImportingTsExtensions：允许导入带有 TypeScript 特定扩展名的 TypeScript 文件，例如 .ts、.mts 或 .tsx。
• --resolvePackageJsonExports：强制 TypeScript 在从 node_modules 中读取包时查询 package.json 文件的导出字段。
• --resolvePackageJsonImports：强制 TypeScript 在执行以 # 开头的查找时查询 package.json 文件的导入字段。
• --allowArbitraryExtensions：允许通过查找 {file basename}.d.{extension}.ts 形式的声明文件来导入具有未知扩展名的文件。
• --customConditions：获取当 TypeScript 从 package.json 的导出或导入字段解析时要考虑的附加条件列表。

7. — verbatimModuleSyntax

TypeScript 5.0 中新的 --verbatimModuleSyntax 标志允许您在发出 JavaScript 代码时保留原始模块语法。 此功能在使用捆绑器时特别有用，因为它不需要额外的转换。例如：

代码语言：javascript复制

// 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 中：

代码语言：javascript复制

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

8.支持 export type*

TypeScript 5.0 引入了对 export type * 语法的支持，它允许您从另一个模块重新导出所有类型。

此语法对于创建仅类型模块或聚合来自多个来源的类型特别有用。

这是一个例子：

代码语言：javascript复制

// 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 标记使您能够指定函数实现满足特定接口。 在使用结构类型或使用 TypeScript 对 JavaScript 代码进行类型检查时，此功能特别有用。

这是一个例子：

代码语言：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 函数被标记为@satisfies JSDoc 标签，表明它满足 Greeter 接口。

10. JSDoc 中的@overload 支持

TypeScript 5.0 添加了对 @overload JSDoc 标记的支持，允许您在 JavaScript 代码中为单个实现定义多个函数签名。

在处理需要支持多种参数类型或形状的复杂函数时，此功能特别有用。

这是一个例子：

代码语言：javascript复制

/**
 * @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 函数标有两个 @overload JSDoc 标记，指定它可以处理数字和字符串作为参数。

11. 在 — build 下传递特定于发射的标志

TypeScript 5.0 引入了在使用 --build 标志时传递 emit-specific 标志的能力。此功能允许您在构建项目时微调项目的输出，从而更好地控制构建过程。部分消息：

• --declaration：从项目中的 TypeScript 和 JavaScript 文件生成 .d.ts 文件。
• --emitDeclarationOnly：只输出 d.ts 文件，不输出 JavaScript 文件。
• --declarationMap：为 d.ts 文件创建 sourcemaps。
• --sourceMap：为发出的 JavaScript 文件创建源映射文件。
• --inlineSourceMap：在发出的 JavaScript 中包含源映射文件。

12. 编辑器中不区分大小写的导入排序

TypeScript 5.0 通过不区分大小写改进了编辑器中的导入排序。在组织导入时，此更改会导致更自然和直观的排序顺序，从而使代码更清晰、更易读。

13. 详尽的开关/外壳完成

TypeScript 5.0 通过提供详尽的 switch/case 补全增强了代码补全体验。 在处理联合类型时，编辑器现在可以建议所有可能的情况，减少遗漏情况的机会，并使编写全面的 switch 语句变得更加容易。 这是一个例子：

代码语言：javascript复制

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

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

14. 速度、内存和包大小优化

TypeScript 5.0 带来了各种性能优化，包括更快的类型检查、更少的内存使用和更小的包大小。这些改进使使用 TypeScript 变得更加愉快，确保了流畅高效的开发体验。

15.重大变更和弃用

与任何主要版本一样，TypeScript 5.0 引入了一些重大更改和弃用。 在升级之前查看发行说明并彻底测试您的项目至关重要。

一些显着的重大变化包括：

• 运行时要求：TypeScript 现在以 ECMAScript 2018 为目标。TypeScript 包还设置了最低预期引擎 12.20。对于 Node 用户，这意味着 TypeScript 5.0 的最低版本要求至少为 Node.js 12.20 及更高版本。
• lib.d.ts 更改：更改 DOM 类型的生成方式可能会对现有代码产生影响。值得注意的是，某些属性已从数字转换为数字文字类型，并且用于剪切、复制和粘贴事件处理的属性和方法已跨接口移动。
• API 重大更改：移至模块，删除了一些不必要的接口并进行了一些正确性改进。
• 关系运算符中禁止的隐式强制转换：

代码语言：javascript复制

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 问题，这里有两个重要的错误改进：

代码语言：javascript复制

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

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

结论

总之，TypeScript 5.0 带来了许多新功能，那么，您觉得哪个功能最有用？欢迎在留言区给我们留言，分享您的看法。

感谢您的阅读。

往期推荐

闲来无事，摸鱼时让 chatgpt 帮忙，写了一个 console 样式增强库并发布 npm

目前工资最高的几家外包公司汇总！（2023最新版）

百度开源的低代码前端框架，支持网页和移动端页面开发

typescript 函数 配置 语法 装饰器

0 人点赞