让 Vuex 更强大：TS 4.1 新特性实现 Vuex 无限层级命名空间的 dispatch 类型推断

TypeScript 4.1 发布了一项令人兴奋的新特性，名为“字符串模板类型”，为解决 Vuex 中 dispatch 函数类型推断问题提供了契机。

背景

在 Vuex 中，dispatch 函数用于触发 actions。然而，由于缺乏类型推断，导致在大型项目中使用它变得困难，因为难以确定每个 action 的确切类型。

TS 4.1 的解决方案

TS 4.1 的字符串模板类型允许我们基于字符串模板创建类型。利用这一点，我们可以创建 Vuex actions 的类型映射，从而为 dispatch 函数提供精确的类型推断。

实现

首先，让我们创建一个表示 Vuex actions 的接口：

interface VuexActions {
  [actionName: string]: (...args: any[]) => void;
}

然后，我们可以使用字符串模板类型创建 actions 类型映射：

type Actions<S> = {
  [K in keyof S]: S[K] extends (...args: infer A) => any
    ? (...args: A) => void
    : never;
};

最后，我们可以使用此类型映射来为 dispatch 函数提供类型推断：

const dispatch = <T extends VuexActions>(
  action: keyof T,
  ...args: Parameters<T[keyof T]>
) => void;

优势

这种方法具有以下优势：

• 无限层级命名空间支持： 由于我们基于字符串模板创建类型，因此可以在 Vuex 中创建无限层级的命名空间，而不会影响类型推断。
• 更好的可读性： 通过明确指定每个 action 的类型，代码变得更加易读和可维护。
• 更强的类型安全： TS 4.1 的类型推断确保在调用 dispatch 函数时传递了正确的参数类型。

用例

在大型 Vuex 项目中，这种方法尤为有用，因为它可以简化 action 的调度并增强代码的可靠性。

结论

TS 4.1 的字符串模板类型为 Vuex 带来了一种强大的新功能，它使我们能够实现无限层级命名空间的 dispatch 类型推断。这不仅提高了代码的可读性，而且还增强了类型安全，从而使大型 Vuex 项目的开发变得更加轻松。

---