如何在Vue组件中为已定义的Pinia Store添加类型标注？

你遇到的报错有两个核心问题：

1. 组件setup函数未将storeForm暴露给模板，导致模板无法识别该变量
2. Pinia Store的类型定义不规范，使用了类型断言而非明确的类型约束

解决方案一：暴露storeForm给模板 #

在组件setup的返回对象中添加storeForm，让模板能访问到它：

// 组件script的setup返回部分
return { firstName, lastName, firstNameRules, lastNameRules, submit, storeForm }; // 新增storeForm

解决方案二：规范Pinia Store的类型标注 #

修改stores/form.ts，用接口明确约束State和方法参数的类型，替代类型断言和any：

import { defineStore } from 'pinia'

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

// 定义login方法的参数类型
interface LoginData {
  firstName: string
  lastName: string
}

export const useForm = defineStore({
  id: 'login',
  state: (): FormState => ({ // 明确State返回类型
    firstName: '',
    lastName: ''
  }),
  actions: {
    login(data: LoginData) { // 替换any为具体类型
      this.firstName = data.firstName
      this.lastName = data.lastName
    }
  }
})

额外优化：组件内表单规则的类型规范 #

组件中的表单规则不需要用ref（规则函数是静态的，不会被修改），同时可以给规则定义明确类型：

// 定义表单规则的类型
type FormRule = (value: string) => boolean | string

const firstNameRules: FormRule = (value) => {
  if (value?.length > 3) return true
  return 'First name must be at least 3 characters.'
}

const lastNameRules: FormRule = (value) => {
  if (/[^0-9]/.test(value)) return true
  return 'Last name can not contain digits.'
}

完成以上修改后，既解决了模板找不到storeForm的报错，又给Pinia Store加上了完整的类型约束，TypeScript能正确推断所有类型。

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