如何使用TypeScript在Pinia中设置表单默认数据键为空字符串

TypeScript的类型定义仅负责静态类型校验，不处理运行时的默认值。要给User对象的firstName和lastName设置默认空字符串，需要在运行时创建对象时指定默认值，以下是两种常用实现方式：

方式一：使用工厂函数生成默认User对象 #

定义一个工厂函数统一生成带默认值的User对象，不管是初始化数组还是后续添加新用户，都能确保属性默认是空字符串，还能提升代码可维护性：

import { defineStore } from 'pinia'

type User = {
  firstName: string
  lastName: string
}

// 生成默认User对象的工厂函数
const createDefaultUser = (): User => ({
  firstName: '',
  lastName: ''
})

export const useForm = defineStore({
  id: 'login',
  state: () => ({
    // 初始为空数组，后续添加用户时调用工厂函数
    users: [] as User[]
  }),
  // 可选：通过action统一处理用户添加逻辑，确保默认值生效
  actions: {
    addNewUser() {
      this.users.push(createDefaultUser())
    }
  }
})

如果初始化时需要直接在数组中加入一个默认用户，只需修改state的返回值：

state: () => ({
  users: [createDefaultUser()]
}),

方式二：直接在state中初始化默认对象 #

如果仅需要在数组初始化时包含一个带默认值的User对象，也可以直接在state里写死默认值：

import { defineStore } from 'pinia'

type User = {
  firstName: string
  lastName: string
}

export const useForm = defineStore({
  id: 'login',
  state: () => ({
    users: [{
      firstName: '',
      lastName: ''
    }] as User[]
  })
})

注意事项 #

• 建议把变量名从User改为users（小写开头），符合JS/TS命名规范，避免和类型名User混淆。
• 若需频繁添加新用户，优先使用工厂函数的方式，避免重复编写默认值代码。

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