我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

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

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

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

以下是简要概述:

  • --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 代码时保留原始模块语法。 此功能在使用捆绑器时特别有用,因为它不需要额外的转换。例如:

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

  • --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 语句变得更加容易。 这是一个例子:

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 重大更改:移至模块,删除了一些不必要的接口并进行了一些正确性改进。
  • 关系运算符中禁止的隐式强制转换:
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;

对构造函数中的参数装饰器进行更准确的类型检查 — experimentalDecorators

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

结论

总之,TypeScript 5.0 带来了许多新功能,那么,您觉得哪个功能最有用?

免责声明:

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

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

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

下个月就要来了?苹果iOS 15五大功能重磅更新,这些真的很实用

随着 6 月 8 日 WWDC 举行日子渐近,果粉们期待的iOS15终于快要来了,那作为一年一次的版本大更新,iOS15中会有哪些亮点呢?
iOS苹果系统2024-12-03

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录