Pinia中State自定义接口类型在actions内外识别为展开结构问题

问题表现 #

定义Pinia store时已显式声明State类型，其中tasks属性标注为自定义接口Task[]类型，但在actions方法内部、外部组件中访问tasks属性时，IDE悬停提示的类型为展开的对象结构数组：

(property) tasks: {
    id?: string | undefined;
    name: string;
    done: boolean;
}[]

未保留Task[]的别名显示形式。

产生原因 #

该现象是TypeScript结构化类型特性+Pinia选项式写法的类型推导逻辑共同导致的：

1. TypeScript本身是结构化类型系统，类型校验只看类型结构是否匹配，不依赖类型别名的名称。
2. 选项式defineStore内部通过多层泛型映射类型，对传入的state、getters、actions做类型合并与转换。在这个转换过程中，自定义接口/类型别名的引用会被消解，最终推导得到的类型是和原类型结构完全等价的展开形式，因此IDE不会显示原类型别名。

该现象不属于类型错误，展开后的类型和Task[]完全兼容，不会引发类型校验失败或运行时异常。

修复方案 #

根据开发习惯可选择以下任意一种方案：

• 改用组合式（Setup风格）defineStore写法：该写法下类型推导不会经过多层映射类型转换，可完整保留自定义类型别名，示例代码：

interface Task {
  id?: string;
  name: string;
  done: boolean;
}

export const useTodoStore = defineStore('todo', () => {
  const tasks = ref<Task[]>([])
  const loading = ref(false)

  async function addTask(name: string): Promise<void> {
    loading.value = true
    tasks.value.push({ name, done: false, id: generateID() })
    await sleep(200)
    loading.value = false
  }

  return { tasks, loading, addTask }
})

• 保留选项式写法的场景下，显式传入defineStore的完整泛型参数，强制Pinia使用你声明的自定义State类型，避免类型展开：

interface Task {
  id?: string;
  name: string;
  done: boolean;
}

interface TodoState {
  tasks: Task[];
  loading: boolean;
}

// 显式声明泛型参数：id类型、state类型、getters类型、actions类型
export const useTodoStore = defineStore<'todo', TodoState, {}, {
  addTask(name: string): Promise<void>
}>({
  id: 'todo',
  state: (): TodoState => ({
    tasks: [],
    loading: false,
  }),
  getters: {},
  actions: {
    async addTask(name: string): Promise<void> {
      this.loading = true;
      this.tasks.push({ name, done: false, id: generateID() });
      await sleep(200);
      this.loading = false;
    },
  },
});

• 无特殊类型显示要求时可无需处理：展开后的类型和原Task[]类型结构完全一致，不影响类型安全和正常业务逻辑开发。

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