教你 TypeScript 4.3 新功能的实践应用

       本文通过解决在实际工作中遇到的问题，层层剖析解法，带你了解 TS4.3 的高级特性，一起来看看吧。

 

 

目录

还原问题现场

解决方案拆解，由浅入深

第一步：核心技术支撑

第二步：Template Literal Types 搭配 Variadic Tuple Types 显奇效

第三步：你可能不了解的 TS 高级特性

最后一步：求解对象全部嵌套子路径的递归泛型

最最后一步：使用尾递归技术优化泛型函数的性能

结语

---

 文章概要

•      实际开发中遇到暂未解决的小通点
•      尝试设想可能的解决方案
•      发现需要依赖TS 4.3新功能
•      由浅入深，分步介绍解决方案
•      介绍方案中涉及到的高级TS特性
•         condition & infer
•         tuple type
•         template string type
•         recursive generic

       已经成为前端标配的 TypeScript 在 5 月底发布 4.3 版本。作为一个小版本迭代，粗看并没有什么令人惊艳的新功能。但如果你真的有在持续关注 TypeScript，那么其中的一项更新值得重点关注：

Template String Type Improvements

为什么值得注意呢？看一下 TS 4.0 以来的三条更新记录：

4.0 版本新增 Variadic Tuple Types

4.1 版本新增 Template Literal Types

4.3 版本完善 Template Literal Types

       然后我现在告诉你，Tuple Types 和 Template Literal Types 其实是一对关系密切的好哥们。所以，聪明的你是不是已经猜到，既然 TS 在 Tuple Types 和 Template Literal Types 持续发力，那很大概率，现在应该可以用它们来完成一些以前不太可能完成的事情。

       而我呢，早在 4 月份的时候就发现了 TS 4.3 将要发布的这个新功能，并且已经在预览版中亲身体验，解决了一个非常有趣的小问题：如何将对象类型的所有可能的合法路径静态类型化。

下面就让我带你看看 4.3 增强之后的 Template Literal Types 可以解决一个什么样的真实问题吧。

还原问题现场

       我们团队现在的项目中使用 FinalForm 管理表单状态，但这不是重点，重点是其中一个和 lodash set 方法几乎一模一样的 change 方法，做不到完全的类型安全。这导致我们在写相关的 TS 代码时，只能用稍显丑陋的 as any 逃生。具体示例看 👇 的代码：

type NestedForm = {
  name: ['赵' | '钱' | '孙' | '李', string];
  age: number;
  articles: {
    title: string;
    sections: string[];
    date: number;
    likes: {
      name: [string, string];
      age: number;
      }[];
  }[];
}

// FinalForm 中的一个常用 API，语义和 lodash 中的 set 几乎一样
interface FormApi<FormValues = Record<string, any>> {
  change: <F extends keyof FormValues>(name: F, value?: Partial<FormValues[F]>) => void
}

const form: FormApi<NestedForm> = // 假装有了一个 form 实例
// 基本使用
form.change('age', '20') // 这样是类型安全的
// 可大量的真实使用场景其实类型不安全，但又完全合情合理，所以只能使用 as any 逃生
form.change('name.0', '刘')
form.change('articles.0.title', 'some string')
form.change('articles.0.sections.2', 'some string')

// 项目中逃生代码
<Select
  placeholder="请选择类型"
  onChange={Kind => {
    // 清空其他字段, 只保留 Kind
    form.change(`${field}.Env.${i}` as any, { Kind });
  }}
>

所以问题就是：我们能让类似的方法完全的类型安全吗？

       答案我也不藏着掖着了：解决此类问题需要 4.3 增强之后的 Template Literal Types 和 4.0 版本新增 Variadic Tuple Types，再加上一些其它早就有的高级特性。

       看到这些新增和高级字眼，妥妥的一道高阶 TS 面试题 👀 有木有。而我确实也能向你保证，如果接下来的内容，你能做到既知其然，又知其所以然，TS 这关你稳过。

解决方案拆解，由浅入深

第一步：核心技术支撑

• 很多时候，解决方案往往已经藏在问题中

  • change 方法类型安全的部分是对象最外层的 key：

    • name
    • age
    • articles

  • 类型不安全的部分是对象其它的嵌套路径：

    • name.0
    • name.1
    • articles.0.likes.0.age

       我们的目标其实很清晰了：得到对象的全部可能路径。也许这依然有些模糊，但如果如果我换个说法，你或许就明白了：给你一颗二叉树，问题是从根节点出发，所有可能的路径。

       但是这些和 Template Literal Types 有什么关系吗？！当然有，而且非常有。我们都知道 articles.0.likes.0.age 是字符串，但是它更是 template string type。也正是它，可以让我们在类型层面表示出一个对象的全部嵌套子路径。