TypeScript 5.1发布,新功能更新

文章详细介绍了TypeScript5.1版本的一些重要更新,包括允许返回类型为`undefined`,getter和setter可以设置不相关类型,JSX元素和标签的异步支持,命名空间属性名称在JSX中的应用,typeRoots配置项的改进,以及VSCode中JSX标签的链接编辑和JSDoc标签的代码段补全功能。
摘要由CSDN通过智能技术生成

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
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一拖再拖 一拖再拖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值