如何用TypeScript为Vuex全局Action统一添加类型，避免重复定义？

我刚接触TypeScript，希望给Vue Store中声明的每一个Action都加上特定的类型结构，不用在每个Vuex模块文件里重复定义。

当前写法（需要重复声明类型） #

// 全局声明的返回类型接口
interface ReturnObject {
  status: boolean;
  msg: string;
}

export default new Vuex.Store({
  actions: {
    // 每个Action都得手动写返回类型
    exampleAction: async (context, payload): Promise<ReturnObject> => {
      return { status: true, msg: 'Hello World!' }
    },
  },
  modules: {
    // 模块里的Action也得重复这套写法
  }
})

期望实现的效果 #

export default new Vuex.Store({
  actions: {
    // 类型自动应用，不用手动声明返回值类型
    async exampleAction(context, payload) {
      return {status: true, msg: 'Hello World!'}
    }
  },
  modules: {
    // 模块中的Action也自动生效
  }
})

实现方案 #

1. 全局定义返回类型并扩展Vuex类型

在项目的types/vuex.d.ts（没有就新建）中声明全局类型和Vuex的类型扩展：

// types/vuex.d.ts
import { ActionContext, ActionTree } from 'vuex'

// 你的统一返回类型
export interface ReturnObject {
  status: boolean;
  msg: string;
}

// 自定义Action处理函数类型，强制返回Promise<ReturnObject>
type TypedAction<S, R> = (
  context: ActionContext<S, R>,
  payload: any
) => Promise<ReturnObject>

// 扩展Vuex的ActionTree，让所有Action默认使用自定义类型
declare module 'vuex' {
  export interface ActionTree<S, R> {
    [key: string]: TypedAction<S, R>
  }
}

2. 配置tsconfig.json识别类型文件

确保tsconfig.json包含自定义类型目录：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./types"]
  }
}

3. 直接使用即可

现在根Store和所有模块的Action都会自动继承返回类型校验，不用手动声明：

// 根Store示例
export default new Vuex.Store({
  actions: {
    async exampleAction(context, payload) {
      // 返回结构不符合时TS会自动报错
      return { status: true, msg: '操作成功' }
    },
    // 错误示例：TS会提示缺少msg字段
    // async badAction(context) {
    //   return { status: false }
    // }
  },
  modules: {
    user: {
      actions: {
        async fetchUser(context) {
          return { status: true, msg: '用户信息获取成功' }
        }
      }
    }
  }
})

补充：支持自定义Payload类型

如果需要给不同Action指定不同的Payload类型，可以把TypedAction改成泛型：

type TypedAction<S, R, P = any> = (
  context: ActionContext<S, R>,
  payload: P
) => Promise<ReturnObject>

// 使用时指定Payload类型
async exampleAction(context, payload: {id: number}) {
  return { status: true, msg: `获取ID为${payload.id}的数据成功` }
}

内容的提问来源于stack exchange，提问作者passionateLearner