TypeScript5.4更新五大新特性都给开发者带来哪些方便的体验？

2024年3月6号微软给typescript带来了新的特性，让在JavaScript在编码的过程中有更好的推断，提高IDE的提示和错误提示警告。

如果你还不熟ts？ts通过使声明和描述类型成为可能。在我们的代码中编写类型，使我们能够解释意图，并让其他工具检查我们的代码来捕捉错误，比如打字错误，null和undefined的问题等。类型也支持 TypeScript 的编辑器工具，比如自动完成、代码导航和重构。

TypeScript 5.4 带来了重磅的特性？

这次带来的特性非常多，可以阅读到进行devblogs.microsoft.com/typescript/…

在这么多特性中，梦兽编程挑选几个感觉开发过程中比较常用的点分享，其他的感觉使用频率不多可以自己去查阅哦！！

另外如果想加入梦兽编程交流群，可微信搜索【梦兽编程】回复111加入微信群。

1. NoInfer实用程序类型

你想要避免TypeScript对某个值进行类型推断，而是希望显式指定类型时非常有用。

一般来讲强制类型语言都会有多态的问题，为了让你的封装拥有更好的扩展性。我们都会使用泛型进行编码，强制类型用的好不好与你的泛型使用的好不好有一定的关系。

我们先来看一个最简单的泛型例子。

function checkLevel<T extends string>(levels: T[], defaultLevel?: T) {}

checkLevel(["admin", "user"], "hell");

这个时候我们就可以用Noinfer让Ts不进行类型推断，这样我们就可以把defaultLevel类型到范围实在levels的范围中。

function checkLevel<T extends string>(levels: T[], defaultLevel?: NoInfer<T>) {}

checkLevel(["admin", "user"], "hell");

在没有Noinfer之前我们也可以这么做，但随着场景的复杂情况。可能会面临为了类型而类型的情况

type MyNonInfer<T> = [T][T extends any ? 0 : never];

function checkLevel<T extends string>(
    levels: T[],
    defaultLevel?: MyNonInfer<T>
) {}

checkLevel(["admin", "user"], "hell");

2. 缺失参数的函数快速修复

最后我们得到的结果如下：

function someFunction(a: string, b: string, c: string) {
    return a + b;
}

let a = "a";
let b = "b";
let c = "c";
someFunction(a, b, c);

3. Object.groupBy 和 Map.groupBy

相信大家日常开发过程中，都会遇到某个集合使用某个字段值进行分组的场景。一般我们都会使用lodashjs依赖库中的**groupBy** 方法进行处理。在ts 5.4中我们将可以使用ts原生的特性进行这种操作，ts在编译过程帮你做了类似的操作。

const array = [0, 1, 2, 3, 4, 5];

const myObj = Object.groupBy(array, (num, index) => {
  return num % 2 === 0 ? "even" : "odd";
});

这里的myObj结构如下：

const myObj = {
    even: [0, 2, 4],
    odd: [1, 3, 5],
};

Map.groupBy

Map.groupBy的大同小异，只不过他是处理Map类型的分组。需要注意的这两种生成结果属性都是可选，使用前是否为空的最好判断再使用。

目前要使用这两个特性需要把tsconfig.json中target或者lib有esnext才能使用，ts团队预计es2024的稳定版中成为正式方案。

4. 优化了闭包中的类型检测

这一个是一个优化点，现在还是怎么写，只是不需要做as的类型定义操作。我们举一个例子

function example() {
    let x: string | number | boolean;

    x = Math.random() > 0.5 ? "hello" : 10;

    if (typeof x === "string") {
        // 在 TypeScript 5.4 之后，这里的 x 类型会被正确缩小为 string
        return () => x.toLocaleLowerCase();
    }
		// 在 TypeScript 5.4 之后，这里的 x 类型会被正确缩小为 number
    return () => x;
}

这代码如果在5.4之前闭包中是无法知道你x是什么类型。

5. CommonJS模块加载的优化

在 TypeScript 5.4 中，对 require() 调用的支持得到了改进，特别是在 --moduleResolution bundler 和 --moduleResolution preserve 模式下。这意味着无论你使用哪种模块解析策略，TypeScript 都能更好地理解和处理 require() 调用，提供更准确的类型检查和代码补全功能。 例如，在 --moduleResolution bundler 模式下，TypeScript 可以正确地推断出通过 require() 导入的模块的类型，即使这些模块没有相应的 .d.ts 声明文件。这提高了开发体验，因为它允许你在使用打包工具时获得更好的类型安全。 在 --moduleResolution preserve 模式下，TypeScript 也能更好地处理 require() 调用，因为它会保留这些调用并在生成的代码中输出它们。这允许你在不使用打包工具的情况下，直接运行 TypeScript 输出的 JavaScript 代码，而不用担心模块导入的问题。 总之，TypeScript 5.4 的改进使得在使用 require() 导入模块时，无论你选择哪种模块解析策略，都能获得更好的类型检查和开发体验。

比如我们现在有这么一个文件js，在没有声明d.ts文件的时候去引入CommonJS模块无法进行包里面的属性推断。

// myModule.js
module.exports = {
  myFunction: function(str) {
    return str;
  }
};

// 5.4 之后, 可以准确推断出类型
import myFunction = require('myModule/myFunction');

使用这个的前提需要设置tsconfig.json这ok的项开启该功能。

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        // ok
        "module": "Preserve",

        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        //ok
        "esModuleInterop": true,
        "allowImportingTsExtensions": true,
        //ok
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src"]
}

想了解更多TypeScript动态，欢迎关注我们的公众号/加入我们的技术交流群