TypeScript类型模板字符串实现Vuex的commit和dispatch类型判断

本文是在掘金的这篇文章（TS 4.1 新特性实现 Vuex 无限层级命名空间的 dispatch 类型推断。）的基础上进一步的实现，在阅读本文之前，可以先到掘金看看这篇文章。

通过上面的 Actions 和 Mutations，我们可以很轻松地通过 infer 拿到 action 名称、payload 类型和 mutation 名称、payload 类型。而 action 名称、mutation 名称在 Vuex 中就是唯一的。当我们通过 dispatch 方法或者 commit 方法去触发一个 action 或者 mutation 的时候，我们只要把 action 名称和 payload 类型作为参数传入，或者把 mutation 名称和 payload 类型作为参数传入即可。

换言之，我们不需要再自己去维护一个字符串数组去存放 action 名称和 mutation 名称了，我们只需要维护一个字符串数组去存放 action 名称和 payload 类型，或者 mutation 名称和 payload 类型就可以了。

TypeScript 类型模板字符串

TypeScript 4.1 引入了一种新的语法特性，称为类型模板字符串。类型模板字符串允许我们使用模板字符串来定义类型。这使得我们可以创建更灵活和动态的类型。

例如，我们可以使用以下类型模板字符串来定义 Vuex 的 commit 和 dispatch 类型：

type Commit<T extends string> = {
  type: T;
  payload: any;
};

type Dispatch<T extends string> = {
  type: T;
  payload: any;
};

使用这些类型模板字符串，我们可以轻松地定义 Vuex 的 commit 和 dispatch 类型：

const commit: Commit<'ADD_ITEM'> = {
  type: 'ADD_ITEM',
  payload: {
    item: 'new item',
  },
};

const dispatch: Dispatch<'REMOVE_ITEM'> = {
  type: 'REMOVE_ITEM',
  payload: {
    id: 1,
  },
};

使用 TypeScript 类型模板字符串实现 Vuex 的 commit 和 dispatch 类型判断

现在，我们可以使用 TypeScript 类型模板字符串来实现 Vuex 的 commit 和 dispatch 类型判断。

function commit<T extends string>(type: T, payload: any): void {
  // ...
}

function dispatch<T extends string>(type: T, payload: any): void {
  // ...
}

使用这些函数，我们可以轻松地判断 Vuex 的 commit 和 dispatch 类型：

commit('ADD_ITEM', {
  item: 'new item',
});

dispatch('REMOVE_ITEM', {
  id: 1,
});

结论

TypeScript 类型模板字符串是一种强大的工具，我们可以使用它来创建更灵活和动态的类型。这使得我们可以更轻松地实现 Vuex 的 commit 和 dispatch 类型判断。