Vue3 Store模式下如何为loading字段添加TypeScript类型安全？

这里有几种方式可以确保loading字段的布尔类型安全：

方法1：定义显式接口（推荐） #

先声明一个接口约束Store的完整结构，既能保证loading的类型，也能统一规范整个Store的类型规则：

import { reactive } from "vue";

// 定义接口明确Store的结构与类型
interface ColorServiceState {
  loading: boolean;
  toggleLoading(): void;
}

export const ColorService = reactive<ColorServiceState>({
  loading: false,

  toggleLoading(): void {
    this.loading = !this.loading;
  }
});

此时TypeScript会自动校验所有字段的类型，若你误将非布尔值赋值给loading（比如this.loading = "loading"），编辑器会立即抛出类型错误。

方法2：直接为单个字段标注类型 #

如果Store结构简单，也可以直接在loading字段上显式标注类型：

import { reactive } from "vue";

export const ColorService = reactive({
  loading: false as boolean, // 显式指定该字段为布尔类型

  toggleLoading(): void {
    this.loading = !this.loading;
  }
});

不过这种方式仅针对单个字段生效，当Store的状态和方法增多时，还是推荐用接口统一约束，可读性和维护性会更好。

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