【译】Typescript 4.0 beta 常用新特性一览

2023-09-24 17:15:59 浏览数 (2)

Typescript 4.0 beta

  • 2020年的7月26号，微软发布了 TypeScript 4.0 beta。
  • 这里主要是对几个主要的特性做一下自己浅显的理解。

相关文章导航

  • Typescript 3.7 常用新特性一览
  • Typescript 3.8 常用新特性一览
  • Typescript 3.9 常用新特性一览
  • Typescript 4.0 beta 常用新特性一览

0、怎么使用

代码语言：javascript复制
npm install typescript@beta
// or
yarn add typescript@beta

几个重要的新特性

1、/** @deprecated */ 支持
  • 不建议/不赞成使用 注释
    • 在我们实际使用的场景中其实用户很大，在新老工程替换的时候，为了维护老项目和代码的继续正常运行。
    • 有些年老的代码(bad smell)不得不留在代码中，但是又不希望萌新同事使用这些方法，就可以上这个注释，用来更好警告使用者不要使用这里的代码。
2、Insiders 编辑器支持部分编辑/加载模式
  • Typescript 编译的时候很慢，特别是大项目，应该不少小伙伴都会遇到这个问题。

具体来说，罪魁祸首通常是一个称为项目加载的过程，该过程与我们的编译器的程序构建步骤大致相同。这是从一组初始文件开始，解析它们，解析它们的依存关系，解析那些依赖关系，解析那些依赖关系的依赖关系（开始各种套娃）等等的过程。

当前，唯一支持此模式的编辑器是Visual Studio Code Insiders，您可以按照以下步骤尝试。

简单来说 ts4.0 beta 就是在允许配置单个文件视图 ts 编译模式，让以前的启动项目的时候 20s 的时间缩短到 2-5s 左右。

  • 安装Visual Studio Code Insiders
  • 配置Visual Studio Code Insiders以使用Beta，或为Visual Studio Code Insiders 安装JavaScript和TypeScript Nightly Extension。
3、更智能的自动导入
  • 自动导入是一直有的，在我们在package.json 引入一个 dependencies 因为使用 ts 的缘故，我们一般会加上 @types 相关的包。以前由于 ts 的特性，自动导入的时候会做很多额外的操作，比如会进行所有 node_modules 的 type checking （类型检测）。
  • 在 4.0 中我们的 ts 在自动导入需要的 @types 而不做额外的操作。
代码语言：javascript复制
打开JSON设置视图： > Preferences: Open Settings (JSON)
添加以下行：

// The editor will say 'dynamic' is an unknown option,
// but don't worry about it for now. It's still experimental.
"typescript.tsserver.useSeparateSyntaxServer": "dynamic",
4、unknown 在 catch 中允许使用
  • 以前我们在 try catch 使用
代码语言：javascript复制
try {
    // ...
}
catch (x) {
    // x has type 'any' - have fun!
    console.log(x.message);
    console.log(x.toUpperCase());
    x  ;
    x.yadda.yadda.yadda();
}
  • 现在就加上了 unknown
代码语言：javascript复制
try {
    // ...
}
catch (e: unknown) {
    // error!
    // Property 'toUpperCase' does not exist on type 'unknown'.
    console.log(e.toUpperCase());

    if (typeof e === "string") {
        // works!
        // We've narrowed 'e' down to the type 'string'.
        console.log(e.toUpperCase());
    }
}
5、可变参数的元祖类型（Variadic Tuple Types）
  • 如果不知道元组类型和数组的区别可以看看这篇文章 TypeScript 基本类型和泛型的使用
  • 首先我们来看看常用的两个 javascript 的方法 concat 和 tail
代码语言：javascript复制
function concat(arr1, arr2) {
    return [...arr1, ...arr2];
}

// 返回除第一个元素外的其他所有元素
function tail(arg) {
    const [_, ...result] = arg;
    return result
}
复制代码

4.1 思考怎么在 ts 中键入

  • 简单的方法就是使用 函数重载 来实现，来看一个例子
代码语言：javascript复制
// 其中 A,B,C,D 是不同基本类型
function concat<>(arr1: [], arr2: []): [A];
function concat<A>(arr1: [A], arr2: []): [A];
function concat<A, B>(arr1: [A, B], arr2: []): [A, B];
function concat<A, B, C>(arr1: [A, B, C], arr2: []): [A, B, C];
function concat<A, B, C, D>(arr1: [A, B, C, D], arr2: []): [A, B, C, D];
function concat<A, B, C, D, E>(arr1: [A, B, C, D, E], arr2: []): [A, B, C, D, E];
function concat<A, B, C, D, E, F>(arr1: [A, B, C, D, E, F], arr2: []): [A, B, C, D, E, F];)
复制代码

4.2 上面还只是为了给 arr1 支持不同类型，函数重载已经比较复杂了。

  • 当我们要支持 arr2 的不同类型的时候会更加的复杂
代码语言：javascript复制
function concat<A2>(arr1: [], arr2: [A2]): [A2];
function concat<A1, A2>(arr1: [A1], arr2: [A2]): [A1, A2];
function concat<A1, B1, A2>(arr1: [A1, B1], arr2: [A2]): [A1, B1, A2];
function concat<A1, B1, C1, A2>(arr1: [A1, B1, C1], arr2: [A2]): [A1, B1, C1, A2];
function concat<A1, B1, C1, D1, A2>(arr1: [A1, B1, C1, D1], arr2: [A2]): [A1, B1, C1, D1, A2];
function concat<A1, B1, C1, D1, E1, A2>(arr1: [A1, B1, C1, D1, E1], arr2: [A2]): [A1, B1, C1, D1, E1, A2];
function concat<A1, B1, C1, D1, E1, F1, A2>(arr1: [A1, B1, C1, D1, E1, F1], arr2: [A2]): [A1, B1, C1, D1, E1, F1, A2];
复制代码

4.3 从这里可以看到，如果我们要在 ts 中实现 tail 函数的话，我们的重载函数的复杂度就会无穷尽的增长。官方叫他 This is another case of what we like to call “death by a thousand overloads”

  • 谈到 overload 这里肯定会想到 -地表最强骨法师 飞鼠- 被 1000 个骨王 x 倒（大雾）。

不好意思放错图了，看这个

ide 编程算法 typescript

0 人点赞