TypeScript 5.1发布,新功能更新

news2025/1/24 5:10:40

文章目录

      • 1:返回类型增加undefined
      • 2:getter可以设置和 setter 的不相关类型
      • 3:对 JSX 元素和 JSX 标签的异步支持
      • 4:支持命名空间属性名称 JSX
      • 5:typeRoots在模块更新
      • 6:JSX 标签的链接游标
      • 7:@param JSDoc 标签的代码段补全
      • 8:优化/重大变化部分

1:返回类型增加undefined

type fun = () => undefined;

这里设置了一个别名 fun,当时使用它的时候,我们必须显示返回一个 undefined

const f: fun = () => {
  return undefined;
};
f();

现在你可以直接设置返回类型:

const f: fun = ():undefined => {
};
f();

而不仅限于 void any

4.3版本:❌
5.1版本:✅

在这里插入图片描述

2:getter可以设置和 setter 的不相关类型

const point = {
    get value(): number {
        return 0;
    },
    set value(value: string) {
    }
};
point.value = '888'; 
console.log(point.value); 

在之前版本,get 返回类型应该为 set 的子类型,如下:

const point = {
    get value(): number {
        ......
    },
    set value(value: string|number) {
    }
};

在新版本 5.1 中,宽松了这种约束。

4.3版本:❌
5.1版本:✅

在这里插入图片描述
但是,您应该设置注释,否则您可能会向他人表达错误的解释。

3:对 JSX 元素和 JSX 标签的异步支持

我们看下 React 对 JSX 类型的部分定义:

namespace JSX {
        // 用于普通的HTML元素
        interface IntrinsicElements {
            // 为每一个HTML元素提供了对应的属性
            // ...
            // 其他HTML元素
        }

        // 用于React组件
        interface Element extends React.ReactElement<any, any> { }
        interface ElementClass extends React.Component<any> {
            render(): React.ReactNode;
        }
        interface ElementAttributesProperty { props: {}; }
        interface ElementChildrenAttribute { children?: {}; }
        // ...
}

typecript 总是通过 JSX.Element 来判断 JSX 的类型,而React 的未来版本可能会对返回 Promises 的组件提供有限的支持。

所以为了解决这个问题,typescript 5.1 增加了新属性 ElementType ✅,以供用户指定返回的具体的异步组件类型。

如果不是很理解,你可以把它当成一种约定:“我为了适应你,我们共同创建一个新的约定。”

“真好,我感到孤单了,或许可能我应该得到一个拥抱的”

4:支持命名空间属性名称 JSX

使用 JSX 时,ts 支持了以下写法:a:b

// ✅
<Foo a:b="hello" />

5:typeRoots在模块更新

typeRoots 的主要作用是告诉 TypeScript 编译器在哪些目录下查找类型定义文件(.d.ts 文件)。

默认情况下会查找node_modules/@types目录下的.d.ts文件。

如:

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    ...
  }
}

4.3版本:❌

  1. 仅可以解析为目录

5.1版本:✅

  1. 可以解析为目录或文件(如果这里解释有误,劳烦通知我纠正,感谢)

->详细内容请看这里<-

6:JSX 标签的链接游标

这里的更新功能主要是针对于 vscode 的。其他工具应该也包含该功能。

在这里插入图片描述

  1. 使用快捷键 Ctrl+, (ctrl加逗号)
  2. 输入Linked Editing
  3. 找到 “Editor: Linked Editing” 这个选项,然后勾选它

7:@param JSDoc 标签的代码段补全

8:优化/重大变化部分

  1. 避免不必要的类型实例化
  2. 联合文字的否定案例检查
  3. 减少对扫描器的调用以进行 JSDoc 解析
  4. ES2020 和 Node.js 14.17 作为最低运行时要求
  5. 明确typeRoots禁用向上行走node_modules/@types

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

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

相关文章

Python中对文件的基本操作

文章目录 文件和目录路径文件的读取、写入、复制、删除、变更位置及修改名称解压缩zip格式的文件剪切板的应用使用python-docx处理Word文档使用openpyxl处理Excel文档示例&#xff1a;获取Excel文档中的数据生成Word文档 文件和目录路径 os库是Python内置的标准库&#xff0c;…

张天禹移动端学习

文章目录 相关概念&#xff08;一&#xff09;屏幕相关1. 屏幕大小2. 屏幕分辨率3. 屏幕密度 &#xff08;二&#xff09;像素相关1.物理像素2. css 像素3. 设备独立像素4.像素比5.像素之间的关系 &#xff08;三&#xff09;图片高清显示位图像素图片的高清显示&#xff08;媒…

chatgpt赋能python:Python下如何给网页添加背景图片

Python下如何给网页添加背景图片 随着现代互联网的快速发展&#xff0c;人们对于网页设计的要求越来越高&#xff0c;其中非常重要的一项就是背景图。在Python编程中&#xff0c;我们也可以很容易的为网页添加背景图片。 HTML中的background属性 要给网页加上背景图&#xf…

chatgpt赋能python:Python加法表达式,快速简便的计算方式

Python加法表达式&#xff0c;快速简便的计算方式 介绍 Python是一种可读性强、简洁、易于学习的编程语言&#xff0c;同时也是一种高级编程语言&#xff0c;由于其简洁性和可读性&#xff0c;越来越多的程序员们选择Python作为他们的工作语言。在Python中&#xff0c;加法表…

C++技能 - 详解使用Lambda表达式【再也不怕看不懂别人的代码了,干货还是蛮多的】

系列文章目录 C高性能优化编程系列 深入理解软件架构设计系列 高级C并发线程编程 C技能系列 期待你的关注哦&#xff01;&#xff01;&#xff01; 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everything is for the future of dream w…

C语言之函数初阶(2)

目录 1. 函数是什么 2. 库函数 3. 自定义函数 4. 函数参数 5. 函数调用 6. 函数的嵌套调用和链式访问 7. 函数的声明和定义 8. 函数递归 上一篇博客我们讲解了函数的前六个比较容易理解的部分&#xff0c;这一篇博客我们来讲解最后两个部分 在讲这篇博客之前&am…

Shell免交互操作

目录 一、Here Document 免交互 1.免交互定义 2.格式和使用方法 二、Expect 免交互 1.简介 2.格式和使用 &#xff08;1&#xff09;声明解释器 &#xff08;2&#xff09;spawn&#xff08;跟踪&#xff09; &#xff08;3&#xff09;expect&#xff08;期望&#x…

SpringBoot整合minio服务(超详细)

一、使用docker部署minio 1、拉取镜像 docker pull minio/minio 2、创建目录 mkdir -p /home/minio/config mkdir -p /home/minio/data 3、创建Minio容器并运行 docker run -p 9000:9000 -p 9090:9090 \--nethost \--name minio \-d --restartalways \-e "MINIO_ACC…

基于OpenCV的自动报靶识别实验

基于OpenCV的自动报靶识别实验 问题方案实验结论 问题 户外胸环靶自动报靶问题&#xff0c;目前是通过声电等方式来识别&#xff0c;成本较高&#xff0c;本文尝试使用图像处理的方法来识别。 方案 前提&#xff1a;固定相机 确定靶子的四个顶点&#xff1a;目前使用人工手…

使用imp和exp命令对orcale进行导入和导出

docker 进行orcale 查看这篇文章 https://editor.csdn.net/md/?articleId131026846 1、进入orcale 1、进入orcale容器 docker exec -it oracle11g bash2、orcale连接sysdba用户 进入root su root密码&#xff1a;helowin切换到oracle用户 su oracle使用sqlplus登录test用户…

chatgpt赋能python:Python中如何删除字符串中某个字符

Python中如何删除字符串中某个字符 Python是一种功能强大的编程语言&#xff0c;许多开发人员喜欢使用它来编写应用程序。字符串是Python中的常见数据类型之一&#xff0c;可用于存储文本。有时&#xff0c;我们可能需要删除字符串中的某个字符。本文将介绍如何在Python中使用…

GDB的学习

目录&#xff1a; 什么是gdb&#xff1f;gdb的安装gdb的使用 gdb的一些骚操作watch命令的使用调试core文件 什么是gdb&#xff1f; gdb的全称是GNU debugger&#xff0c;看名字就知道 gdb 是用来对程序进行 debug 的&#xff0c;不管是学习还是工作中&#xff0c;用好gdb&…

redis五种数据类型具体时候的底层编码

redis随着值的类型不同&#xff0c;其在底层编码类型会不相同。目前现有的编码格式有 #define OBJ_ENCODING_RAW 0 /* Raw representation */ #define OBJ_ENCODING_INT 1 /* Encoded as integer */ #define OBJ_ENCODING_HT 2 /* Encoded as hash table */ #def…

RabbitMQ集群部署之普通模式

1.集群分类 在RabbitMQ的官方文档中&#xff0c;讲述了两种集群的配置方式&#xff1a; 普通模式&#xff1a;普通模式集群不进行数据同步&#xff0c;每个MQ都有自己的队列、数据信息&#xff08;其它元数据信息如交换机等会同步&#xff09;。例如我们有2个MQ&#xff1a;m…

chatgpt赋能python:Python怎么再加一个的SEO

Python怎么再加一个的SEO 作为一名有10年Python编程经验的工程师&#xff0c;我深知如何将Python项目优化为搜索引擎友好的代码。当谈到SEO时&#xff0c;构建优化的代码比任何其他技术都更加重要。在本文中&#xff0c;我将介绍一些Python中的关键SEO技巧&#xff0c;并强调如…

Spring 事务管理方案和事务管理器及事务控制的API

目录 一、事务管理方案 1. 修改业务层代码 2. 测试 二、事务管理器 1. 简介 2. 在配置文件中引入约束 3. 进行事务配置 三、事务控制的API 1. PlatformTransactionManager接口 2. TransactionDefinition接口 3. TransactionStatus接口 往期专栏&文章相关导读 …

【前端 - CSS】第 11 课 - 选择器

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、缘起 2、基础选择器 2.1、标签选择器 2.2、类选择器 2.3、id 选择器 2.4、通配符选择器 3、画盒子 4、总结 1、缘…

chatgpt赋能python:如何使用Python删除变量中的数据?

如何使用Python删除变量中的数据&#xff1f; Python是一种非常流行的编程语言&#xff0c;许多开发人员使用它来开发高效和可靠的应用程序。在处理数据时&#xff0c;Python提供了一些内置功能来执行一些基本任务。本文将探讨如何使用Python删除变量中的数据的方法。 什么是…

差动保护原理

差动保护是输入的两端CT矢量差&#xff0c;当达到设定的动作值时启动动作元件。保护范围在输入的两端CT之间的设备&#xff08;可以是线路&#xff0c;发电机&#xff0c;电动机&#xff0c;变压器等电气设备&#xff09; 什么是差动保护 电流差动保护是中的一种保护。正相序是…

UDP协议和TCP协议

目录 UDP TCP 通过序列号与确认应答提高可靠性 为什么TCP是三次握手 为什么是四次挥手 超时重传机制 流控制 利用窗口控制提高速度 窗口控制与重发控制 拥塞控制 延迟确认应答 捎带应答 UDP UDP是不具有可靠性的数据报协议。细微的处理它会交给上层的应用去完成。…