TypeScript 5.3

news2025/3/12 20:33:04

导入属性

TypeScript 5.3支持导入属性提案的最新更新。

导入属性的一个用例是向运行库提供有关模块预期格式的信息。

 
// We only want this to be interpreted as JSON,
// not a runnable/malicious JavaScript file with a `.json` extension.
import obj from "./something.json" with { type: "json" };

这些属性的内容不会被TypeScript检查,因为它们是特定于主机的,并且只是单独留下,以便浏览器和运行时可以处理它们(可能是错误)。

 
// TypeScript is fine with this.
// But your browser? Probably not.
import * as foo from "./foo.js" with { type: "fluffy bunny" };

动态import()调用也可以通过第二个参数使用导入属性。

 
const obj = await import("./something.json", {
with: { type: "json" }
});

第二个参数的预期类型由一个名为ImportCallOptions的类型定义,默认情况下,该类型只需要一个名为with的属性。

请注意,导入属性是早期称为“导入断言”的提案的演变 最明显的区别是使用with关键字而不是assert关键字。 但不太明显的区别是,运行时现在可以自由地使用属性来指导导入路径的解析和解释,而导入断言只能在加载模块后断言某些特性。

随着时间的推移,TypeScript将弃用旧的导入断言语法,而支持拟议的导入属性语法。 使用assert的现有代码应该迁移到with关键字。 需要导入属性的新代码应该独占地使用with

我们 我们

稳定支持 resolution-mode 导入类型

在TypeScript 4.7中,TypeScript在resolution-mode中添加了对/// <reference types="..." />属性的支持,以控制是否应该通过importrequire语义解析说明符。

 
/// <reference types="pkg" resolution-mode="require" />
// or
/// <reference types="pkg" resolution-mode="import" />

一个相应的字段也被添加到纯类型导入的导入断言中; 然而,它只在TypeScript的夜间版本中得到支持。 理由是,在精神上,导入断言并不打算指导模块解析。 因此,该功能在夜间模式下进行了试验,以获得更多的反馈。

但是考虑到import属性可以指导解析,并且我们已经看到了合理的用例,TypeScript 5.3现在支持resolution-modeimport type属性。

 
// Resolve `pkg` as if we were importing with a `require()`
import type { TypeFromRequire } from "pkg" with {
"resolution-mode": "require"
};
// Resolve `pkg` as if we were importing with an `import`
import type { TypeFromImport } from "pkg" with {
"resolution-mode": "import"
};
export interface MergedType extends TypeFromRequire, TypeFromImport {}

这些导入属性也可以用于import()类型。

 
export type TypeFromRequire =
import("pkg", { with: { "resolution-mode": "require" } }).TypeFromRequire;
export type TypeFromImport =
import("pkg", { with: { "resolution-mode": "import" } }).TypeFromImport;
export interface MergedType extends TypeFromRequire, TypeFromImport {}

欲了解更多信息,请查看此处的更改

resolution-mode 支持所有模块模式

以前,仅允许在resolution-mode选项moduleResolutionnode16下使用nodenext。 为了更容易地查找专门用于类型目的的模块,resolution-mode现在可以在所有其他moduleResolution选项(如bundlernode10)中正常工作,并且在classic下不会出错。

有关详细信息,请参阅实现pull request。

switch (true) 缩小

TypeScript 5.3现在可以基于case中每个switch (true)子句中的条件执行收缩。

 
function f(x: unknown) {
switch (true) {
case typeof x === "string":
// 'x' is a 'string' here
console.log(x.toUpperCase());
// falls through...
case Array.isArray(x):
// 'x' is a 'string | any[]' here.
console.log(x.length);
// falls through...
default:
// 'x' is 'unknown' here.
// ...
}
}

这个功能是由Mateusz Burzyovski率先开始的 我们想表达一个“谢谢”对于这种贡献。

缩小与布尔值比较的范围

有时候,你可能会发现自己在一个条件下与truefalse进行直接比较。 通常这些都是不必要的比较,但您可能更喜欢它作为一种风格,或者避免围绕JavaScript真实性的某些问题。 无论如何,以前的TypeScript在执行收缩时无法识别这样的表单。

TypeScript 5.3现在在缩小变量时保持并理解这些表达式。

 
interface A {
a: string;
}
interface B {
b: string;
}
type MyType = A | B;
function isA(x: MyType): x is A {
return "a" in x;
}
function someFn(x: MyType) {
if (isA(x) === true) {
console.log(x.a); // works!
}
}

我们

instanceof 缩小范围 Symbol.hasInstance

JavaScript的一个稍微深奥的特性是可以覆盖instanceof操作符的行为。 为此,instanceof操作符右侧的值需要有一个名为Symbol.hasInstance的特定方法。

 
class Weirdo {
static [Symbol.hasInstance](testedValue) {
// wait, what?
return testedValue === undefined;
}
}
// false
console.log(new Thing() instanceof Weirdo);
// true
console.log(undefined instanceof Weirdo);

为了在instanceof中更好地建模这种行为,TypeScript现在检查是否存在这样的[Symbol.hasInstance]方法,并将其声明为类型谓词函数。 如果是,则instanceof操作符左侧的测试值将由该类型谓词适当地缩小。

 
interface PointLike {
x: number;
y: number;
}
class Point implements PointLike {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
distanceFromOrigin() {
return Math.sqrt(this.x ** 2 + this.y ** 2);
}
static [Symbol.hasInstance](val: unknown): val is PointLike {
return !!val && typeof val === "object" &&
"x" in val && "y" in val &&
typeof val.x === "number" &&
typeof val.y === "number";
}
}
function f(value: unknown) {
if (value instanceof Point) {
// Can access both of these - correct!
value.x;
value.y;
// Can't access this - we have a 'PointLike',
// but we don't *actually* have a 'Point'.
value.distanceFromOrigin();
}
}

正如你在这个例子中看到的,Point定义了自己的[Symbol.hasInstance]方法。 它实际上充当了一个名为PointLike的单独类型的自定义类型保护。 在函数f中,我们能够用valuePointLike缩小到instanceof,但不能缩小到Point。 这意味着我们可以访问属性xy,但不能访问方法distanceFromOrigin

有关更多信息,您可以在这里阅读有关此更改的信息。

检查 super 实例字段上的属性访问

在JavaScript中,可以通过super关键字访问基类中的声明。

 
class Base {
someMethod() {
console.log("Base method called!");
}
}
class Derived extends Base {
someMethod() {
console.log("Derived method called!");
super.someMethod();
}
}
new Derived().someMethod();
// Prints:
// Derived method called!
// Base method called!

这与编写类似this.someMethod()的代码不同,因为这可能会调用重写的方法。 这是一个微妙的区别,更微妙的是,如果一个声明从来没有被重写过,这两者通常可以互换。

 
class Base {
someMethod() {
console.log("someMethod called!");
}
}
class Derived extends Base {
someOtherMethod() {
// These act identically.
this.someMethod();
super.someMethod();
}
}
new Derived().someOtherMethod();
// Prints:
// someMethod called!
// someMethod called!

问题是它们可以互换使用,因为super只对在原型上声明的成员有效,而不是实例属性。 这意味着如果你写了super.someMethod(),但是someMethod被定义为一个字段,你会得到一个运行时错误!

 
class Base {
someMethod = () => {
console.log("someMethod called!");
}
}
class Derived extends Base {
someOtherMethod() {
super.someMethod();
}
}
new Derived().someOtherMethod();
// 💥
// Doesn't work because 'super.someMethod' is 'undefined'.

TypeScript 5.3现在更仔细地检查super属性访问/方法调用,以查看它们是否对应于类字段。 如果它们这样做了,我们现在将得到一个类型检查错误。

这张支票是由Jack Works提供的!

类型的交互式嵌体提示

TypeScript的inlay提示现在支持跳转到类型的定义! 这使得轻松浏览代码变得更加容易。

Ctrl-clicking an inlay hint to jump to the definition of a parameter type.

在这里查看更多的实现。

首选设置 type 自动导入

以前,当TypeScript为类型位置中的内容生成自动导入时,它会根据您的设置添加type修饰符。 例如,当在下面的Person上获得自动导入时:

 
export let p: Person

TypeScript的编辑经验通常会为Person添加一个导入:

 
import { Person } from "./types";
export let p: Person

在某些设置下,如verbatimModuleSyntax,它会添加type修饰符:

 
import { type Person } from "./types";
export let p: Person

然而,也许你的代码库不能使用其中的一些选项;或者你只是在可能的情况下偏好显式的type导入。

随着最近的变化,TypeScript现在使其成为特定于编辑器的选项。 在Visual Studio Code中,您可以在UI中的“TypeScript ›首选项:首选仅自动导入类型”下启用它,或者作为JSON配置选项typescript.preferences.preferTypeOnlyAutoImports

通过跳过JSDoc解析进行优化

当通过tsc运行TypeScript时,编译器现在将避免解析JSDoc。 这不仅减少了解析时间,而且还减少了存储注释所占用的内存,沿着减少了垃圾收集所花费的时间。 总而言之,您应该会在--watch模式下看到更快的编译和更快的反馈。

具体的变化可以在这里看到。

因为不是每个使用TypeScript的工具都需要存储JSDoc(例如typescript-eslint和Prettier),所以这种解析策略已经作为API本身的一部分出现。 这可以使这些工具获得与我们为TypeScript编译器带来的相同的内存和速度改进。 注释解析策略的新选项在JSDocParsingMode中描述。 有关此拉取请求的更多信息。

通过比较非规范化相交进行优化

在TypeScript中,联合和交集始终遵循特定的形式,其中交集不能包含联合类型。 这意味着当我们在像A & (B | C)这样的并集上创建一个交集时,该交集将被规范化为(A & B) | (A & C)。 但是,在某些情况下,类型系统仍将保持原始形式以用于显示目的。

原来,原始形式可以用于类型之间的一些聪明的快速比较。

例如,假设我们有SomeType & (Type1 | Type2 | ... | Type99999NINE),我们想看看它是否可以分配给SomeType。 回想一下,我们并没有真正的交集作为我们的源类型-我们有一个看起来像(SomeType & Type1) | (SomeType & Type2) | ... |(SomeType & Type99999NINE)的联合。 当检查一个联合体是否可以赋值给某个目标类型时,我们必须检查联合体的每个成员是否都可以赋值给目标类型,这可能会非常慢。

在TypeScript 5.3中,我们可以看到我们能够隐藏的原始交集形式。 当我们比较类型时,我们做一个快速检查,看看目标是否存在于源交集的任何组成部分中。

有关详细信息,请参阅此pull request。

合并之间 tsserverlibrary.jstypescript.js

TypeScript本身提供了两个库文件:tsserverlibrary.jstypescript.js。 有一些API只在tsserverlibrary.js中可用(如ProjectService API),这可能对某些导入程序有用。 尽管如此,这两个包是不同的,有很多重叠,在包中重复代码。 更重要的是,由于自动导入或肌肉记忆,始终使用一个而不是另一个可能具有挑战性。 意外加载两个模块太容易了,代码可能无法在API的不同实例上正常工作。 即使它确实有效,加载第二个bundle也会增加资源使用。

鉴于此,我们决定将两者合并。 typescript.js现在包含tsserverlibrary.js曾经包含的内容,tsserverlibrary.js现在只是重新导出typescript.js。 对比此次整合前后,我们发现封装尺寸减少了以下几点:

之前Diff差异(百分比)
包装6.90 MIB5.48 MIB-1.42 MiB-20.61%
解包38.74 MiB30.41 MiB-8.33 MiB-21.50%
之前Diff差异(百分比)
lib/tsserverlibrary.d.ts570.95 KiBB-570.10 KiB-99.85%
lib/tsserverlibrary.js8.57 MIBB-8.57 MiB-99.99%
lib/typescript.d.ts396.27 KiB570.95 KiB+174.68 KiB+44.08%
lib/typescript.js7.95 MIB8.57 MIB+637.53 KiB+7.84%

换句话说,封装尺寸减少了20.5%以上。

有关更多信息,您可以在此处查看所涉及的工作。

突破性变化和正确性改进

lib.d.ts 变化

为DOM生成的类型可能会对您的代码库产生影响。 有关更多信息,请参阅TypeScript 5.3的DOM更新。

检查 super 访问实例属性

TypeScript 5.3现在可以检测到super.属性访问引用的声明是类字段并发出错误。 这可以防止在运行时可能发生的错误。

在这里查看更多关于此更改的信息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1269490.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VSCODE 在新窗口中打开

使用VS习惯了&#xff0c;经常在新窗口中打开查看 但是VSCODE&#xff0c;无法拖动标签到一个新窗口中&#xff0c;一直以为没这个功能 后来发现 使用快捷健 ctlk,o 可以将标签页在新窗口中打开&#xff0c;虽然不如vsstudio方便&#xff0c;不过也可实现在新窗口打开的功能…

Mac 浏览器下载的文件名总是「乱码」

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; 本文所说的方法是在出现文件名乱码情况下&#xff0c;如何恢复文件名的正确中文名称&#xff0c;并非一劳永逸地避免乱码的出现。这是由于下载文件名称乱码的出现&#xff0c;往往是系统、浏览器、网站三方面因素共…

基于containerd容器运行时,kubeadmin部署k8s 1.28集群

一.主机准备 1.1主机配置与操作系统说明 centos7u9 1.2主机硬件配置说明 序号主机名ip地址CPU内存硬盘1k8s-master1192.168.1.2002C2G100G2k8s-worker1192.168.1.2012C2G100G3k8s-worker2192.168.1.2022C2G100G 1.3主机配置 1.3.1主机名配置 hostnamectl set-hostname k…

【滑动窗口】长度最小的数组

长度最小的数组 长度最小的数组 文章目录 长度最小的数组题目描述解法暴力解法滑动窗口Java示例代码c示例代码 题目描述 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, num…

【web安全】CSRF漏洞攻击与防御

前言 总结&#xff0c;仅供学习。 csrf的理解 我们了解一个网站有修改信息&#xff0c;密码&#xff0c;添加删除管理&#xff0c;支付转账的功能之后。 通过抓包抓取对方修改操作的数据包样式&#xff0c; 然后在自己网站搭建一个指令。 当别人来访时&#xff0c; 如果…

el-select实现分屏效果

动态绑定class值 &#xff0c;多种判断 :class"type 8 ? home-stye-2 : type 24 ? home-stye-1 : home-stye-3" <div class"home-right-top"><div class"home-right-top-video"><el-row :gutter"20"><el-c…

身份验证和电子邮件的网络安全即将迎来地震

任何拥有 Gmail 或 Yahoo 电子邮件帐户的人都清楚&#xff0c;如果不是明确的欺诈企图&#xff0c;他们的收件箱中可能充满了未经请求的邮件。 这些服务的用户很可能多次想知道他们的提供商是否可以采取措施至少减少垃圾邮件的数量以及随之而来的诈骗风险。 好消息是&#xf…

深入理解网络阻塞 I/O:BIO

&#x1f52d; 嗨&#xff0c;您好 &#x1f44b; 我是 vnjohn&#xff0c;在互联网企业担任 Java 开发&#xff0c;CSDN 优质创作者 &#x1f4d6; 推荐专栏&#xff1a;Spring、MySQL、Nacos、Java&#xff0c;后续其他专栏会持续优化更新迭代 &#x1f332;文章所在专栏&…

CSS:calc() 函数 / 动态计算长度值 / 不同场景使用

一、理解 css calc() 函数 CSS calc() 函数是一个用于计算 CSS 属性值的函数。它可以在 CSS 属性值中使用数学表达式&#xff0c;从而实现动态计算属性值的效果。calc() 函数可以使用加减乘除四种基本数学运算符来计算属性值&#xff0c;还可以使用括号来改变优先级。 二、ca…

从薛定谔的猫——量子理论基础

在介绍量子理论基础之前&#xff0c;先介绍一下薛定谔的猫的故事&#xff0c;这个故事可能大多数朋友并不陌生&#xff0c;下面首先回顾一下&#xff1a; 薛定谔的猫是一个在量子力学中用来说明量子叠加态和测量结果的思维实验。这个思维实验最早由物理学家Erwin Schrdinger在1…

lxd提权

lxd/lxc提权 漏洞介绍 lxd是一个root进程&#xff0c;它可以负责执行任意用户的lxd&#xff0c;unix套接字写入访问操作。而且在一些情况下&#xff0c;lxd不会调用它的用户权限进行检查和匹配 原理可以理解为用用户创建一个容器&#xff0c;再用容器挂载宿主机磁盘&#xf…

Alignment of HMM, CTC and RNN-T,对齐方式详解——语音信号处理学习(三)(选修二)

参考文献&#xff1a; Speech Recognition (option) - Alignment of HMM, CTC and RNN-T哔哩哔哩bilibili 2020 年 3月 新番 李宏毅 人类语言处理 独家笔记 Alignment - 7 - 知乎 (zhihu.com) 本次省略所有引用论文 目录 一、E2E 模型和 CTC、RNN-T 的区别 E2E 模型的思路 C…

【安全-SSH】SSH安全设置

今天发现自己的公有云服务器被攻击了 然后查看了登录日志&#xff0c;如上图 ls -sh /var/log/secure vim /var/log/secure然后增加了安全相关的设置 具体可以从以下方面增加安全性&#xff1a; 修改默认SSH端口公有云修改安全组策略及防火墙端口设置登录失败次数锁定用户及…

vuepress-----4、侧边栏

# 4、侧边栏 # 自动生成侧栏 如果你希望自动生成一个仅仅包含了当前页面标题&#xff08;headers&#xff09;链接的侧边栏&#xff0c;你可以通过 YAML front matter 来实现&#xff1a; --- sidebar: auto ---你也可以通过配置来在所有页面中启用它&#xff1a; // .vuep…

自己动手写 chatgpt: Attention 机制的原理与实现

chatgpt等大模型之所以成功都有赖于一种算法突破&#xff0c;那就是 attention 机制。这种机制能让神经网络更有效的从语言中抽取识别其内含的规律&#xff0c;同时它支持多路并行运算&#xff0c;因此相比于原来的自然语言处理算法&#xff0c;它能够通过并发的方式将训练的速…

深度学习之十二(图像翻译AI算法--UNIT(Unified Neural Translation))

概念 UNIT(Unified Neural Translation)是一种用于图像翻译的 AI 模型。它是一种基于生成对抗网络(GAN)的框架,用于将图像从一个域转换到另一个域。在图像翻译中,这意味着将一个风格或内容的图像转换为另一个风格或内容的图像,而不改变图像的内容或语义。 UNIT 的核心…

Swift 常用关键字

目录 一、数据类型 1. 流程控制 2. 访问控制 3. 功能修饰词 4. 错误处理 5. 泛型和类型 6. 其它关键字 二、部分关键字说明 1. guard 2. class 和 struct struct&#xff08;结构体&#xff09; class&#xff08;类&#xff09; 使用场景 3. mutating 4. proto…

【JUC】十五、中断协商机制

文章目录 1、线程中断机制2、三大中断方法的说明3、通过volatile变量实现线程停止4、通过AtomicBoolean实现线程停止5、通过Thread类的interrupt方法实现线程停止6、interrupt和isInterrupted方法源码7、interrupt方法注意点8、静态方法interrupted的注意点 1、线程中断机制 一…

二叉树leetcode(求二叉树深度问题)

today我们来练习三道leetcode上的有关于二叉树的题目&#xff0c;都是一些基础的二叉树题目&#xff0c;那让我们一起来学习一下吧。 https://leetcode.cn/problems/maximum-depth-of-binary-tree/submissions/ 看题目描述是让我们来求出二叉树的深度&#xff0c;我们以第一个父…

Drawer抽屉(antd-design组件库)简单用法

1.Drawer抽屉 屏幕边缘滑出的浮层面板。 2.何时使用 抽屉从父窗体边缘滑入&#xff0c;覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务&#xff0c;操作完成后&#xff0c;可以平滑地回到原任务。 需要一个附加的面板来控制父窗体内容&#xff0c;这个面板在需要时…