文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 15:16

关注

1.装饰器

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

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:

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


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

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

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


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

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

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

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

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

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

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 中使用以下配置:

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

6.自定义分辨率标志

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

以下是简要概述:

7. — verbatimModuleSyntax

TypeScript 5.0 中新的 --verbatimModuleSyntax 标志允许您在发出 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 中:

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

8.支持 export type*

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

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

这是一个例子:

// 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 代码进行类型检查时,此功能特别有用。 

这是一个例子:

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






function greeter(name: string) {
return `Hello, ${name}!`;
}

在这个例子中,greeter 函数被标记为@satisfies JSDoc 标签,表明它满足 Greeter 接口。

10. JSDoc 中的@overload 支持

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

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

这是一个例子:








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 标志的能力。此功能允许您在构建项目时微调项目的输出,从而更好地控制构建过程。部分消息:

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

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

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

TypeScript 5.0 通过提供详尽的 switch/case 补全增强了代码补全体验。 在处理联合类型时,编辑器现在可以建议所有可能的情况,减少遗漏情况的机会,并使编写全面的 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. 速度、内存和包大小优化

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

15.重大变更和弃用

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

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

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
}
// 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 带来了许多新功能,那么,您觉得哪个功能最有用?

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯