在Vue+Pinia+TypeScript中如何为导入的Store添加类型？是否必须添加？

为什么需要类型定义？ #

完全有必要做类型定义：

• TypeScript环境下，所有变量必须有明确类型，否则编译器会抛出类型错误
• Pinia原生支持TypeScript，正确的类型定义能提供编辑器智能提示，提前发现潜在bug
• 避免像storeForm未被识别这类类型校验错误

步骤1：规范Pinia Store的类型写法 #

你可以通过两种方式给Store的State和Actions添加类型：

方式一：显式定义State接口（推荐，类型更清晰） #

import { defineStore } from 'pinia'

// 定义State的类型接口
interface FormState {
  firstName: string
  lastName: string
}

export const useForm = defineStore('login', {
  // 给state指定返回类型为FormState
  state: (): FormState => ({
    firstName: '',
    lastName: ''
  }),
  actions: {
    // 给login方法的参数指定类型，避免使用any
    login(data: Pick<FormState, 'firstName' | 'lastName'>) {
      this.firstName = data.firstName
      this.lastName = data.lastName
    }
  }
})

方式二：让TypeScript自动推导类型 #

如果State的初始值已经能明确类型，可以省略接口，让TS自动推导：

import { defineStore } from 'pinia'

export const useForm = defineStore('login', {
  state: () => ({
    firstName: '', // TS自动推导为string类型
    lastName: ''
  }),
  actions: {
    // 给参数明确类型，替代any
    login(data: { firstName: string; lastName: string }) {
      this.firstName = data.firstName
      this.lastName = data.lastName
    }
  }
})

步骤2：组件中正确使用Store并让TS识别类型 #

在组件中必须正确导入并调用Store的use函数，才能让TS识别storeForm的类型：

组合式API（