Vue 3 Composition API项目中TypeScript表单应用求助

问题背景 #

在Vue 3 Composition API项目中使用TypeScript时存在理解障碍，希望通过搭建包含以下字段的书籍追踪表单来掌握TS用法：

• 书名
• 作者名
• 总页数
• 是否读完

项目仓库：https://github.com/ilatine/book-tracker

核心实现步骤（结合Composition API + TS） #

1. 定义书籍类型接口

通过interface明确表单数据的类型约束，让TS在开发阶段就能校验字段类型：

// 定义书籍表单的类型结构
interface BookForm {
  title: string;    // 书名：字符串类型
  author: string;   // 作者名：字符串类型
  totalPages: number; // 总页数：数字类型
  isFinished: boolean; // 是否读完：布尔类型
}

2. 创建带类型的响应式表单数据

在<script setup lang="ts">中使用reactive创建响应式表单对象，通过泛型指定类型：

import { reactive } from 'vue';

// 初始化表单数据，严格遵循BookForm类型
const bookForm = reactive<BookForm>({
  title: '',
  author: '',
  totalPages: 0,
  isFinished: false
});

3. 表单提交函数的类型处理

给提交函数指定返回类型，确保函数内操作符合类型约束：

// 表单提交函数，无返回值
const handleSubmit = (): void => {
  // 表单验证逻辑
  if (!bookForm.title.trim() || !bookForm.author.trim()) {
    alert('请填写书名和作者');
    return;
  }
  if (bookForm.totalPages <= 0) {
    alert('总页数必须大于0');
    return;
  }

  // 执行提交逻辑（如存入本地存储、调用API等）
  console.log('提交的书籍信息:', bookForm);
  
  // 重置表单
  Object.assign(bookForm, {
    title: '',
    author: '',
    totalPages: 0,
    isFinished: false
  });
};

4. 模板中的绑定（带类型提示）

在模板中使用v-model绑定表单字段时，TS会自动提供类型提示，避免错误赋值：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>书名：</label>
      <input v-model="bookForm.title" type="text" />
    </div>
    <div>
      <label>作者名：</label>
      <input v-model="bookForm.author" type="text" />
    </div>
    <div>
      <label>总页数：</label>
      <input v-model.number="bookForm.totalPages" type="number" />
    </div>
    <div>
      <label>是否读完：</label>
      <input v-model="bookForm.isFinished" type="checkbox" />
    </div>
    <button type="submit">添加书籍</button>
  </form>
</template>

关键优势说明 #

• 类型约束：TS自动校验字段类型（比如总页数不能输入字符串），提前发现错误
• 代码提示：编辑器根据类型提供字段补全和提示，提升开发效率
• 可维护性：类型定义让代码结构更清晰，后续扩展字段时更易管理

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