TypeScript 5.1来了，有啥重大变化？

TypeScript 5.1 已正式发布。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

重要变化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

• 更智能地检查未定义返回值的函数 (undefined-Returning Functions)

旧代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

function foo() {
    // no return
}

// x = undefined
let x = foo();

//  fine - we inferred that 'f1' returns 'void'
function f1() {
    // no returns
}

//  fine - 'void' doesn't need a return statement
function f2(): void {
    // no returns
}

//  fine - 'any' doesn't need a return statement
function f3(): any {
    // no returns
}

//  error!
// A function whose declared type is neither 'void' nor 'any' must return a value.
function f4(): undefined {
    // no returns
}

新代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

//  Works in TypeScript 5.1!
function f4(): undefined {
    // no returns
}

//  Works in TypeScript 5.1!
takesFunction((): undefined => {
    // no returns
});

//  Works in TypeScript 5.1!
takesFunction(function f() {
    //                 ^ return type is undefined

    // no returns
});

//  Works in TypeScript 5.1!
takesFunction(function f() {
    //                 ^ return type is undefined

    return;
});

• Getters 和 Setters 类型之间无限制

TypeScript 5.1 移除了 Get 访问器的返回类型必须可分配给其 Set 访问器类型 这一限制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

• 携带命名空间的 JSX 标签

使用 JSX 时，TypeScript 现在支持命名空间属性名称。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

import * as React from "react";

// Both of these are equivalent:
const x = <Foo a:b="hello" />;
const y = <Foo a : b="hello" />;

interface FooProps {
    "a:b": string;
}

function Foo(props: FooProps) {
    return <div>{props["a:b"]}</div>;
}

// In some library's code or in an augmentation of that library:
namespace JSX {
    interface IntrinsicElements {
        ["a:b"]: { prop: string };
    }
}

// In our code:
let x = <a:b prop="hello!" />;

• 对 @paramJSDoc Tags 自动补全 Snippet

TypeScript 5.1 支持在 TypeScript 和 JavaScript 文件中输入 @param 标记时的代码片段完成，帮助开发者在编写代码文档或在 JavaScript 中添加 JSDoc 类型时快速生成对应注释信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

• JSX 元素和 JSX Tag 类型之间的解耦类型检查

TypeScript 使用 JSX 的一个痛点是它对每个 JSX 元素标签类型的要求。TypeScript 5.1 让 JSX 库可以更准确地描述 JSX 组件可以返回的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

对于许多人来说，这意味着可以在 React 中使用异步服务器组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

其他变化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

• 支持在 Module Resolution 中查询 typeRoots
• Linked Cursors for JSX Tags
• 其他优化
• 破坏性变更

自 RC 和 Beta 发布以来的变化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

自 Beta 发布以来，开发团队已纠正装饰器中 inithook 的一些行为，社区提议的行为已经过调整。此外还对 isolatedModules 下的 emit 行为进行了更改，确保脚本文件不会被重写为模块。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

这也意味着 transpileModuleAPI 的使用也将确保脚本文件不会被解释为模块，因为它假定使用 isolatedModules。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html

自 RC 发布以来，开发团队对内置重构进行了轻微迭代，以将声明移至现有文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/44705.html