菜鸟教程
教程 ts tutorial

项目实战任务

通过实战任务来巩固 TypeScript 的使用，能够帮助你加深对各个概念的理解。本章节将指导你完成一个小型管理后台的开发、API 类型的自动生成以及表单类型推导等任务。

小型管理后台

使用 Vue 3 或 React 与 TypeScript 搭建一个小型的管理后台。此任务将涵盖增删改查（CRUD）操作、表单验证和组件化开发等内容。

项目需求

  • 管理后台页面：包括列表、详情、编辑等。
  • 表单校验：对表单数据进行验证，确保数据有效性。
  • 接口交互：与后端 API 进行数据交互。
  • TypeScript 类型推导：通过 TypeScript 自动推导类型，确保类型安全。

示例代码

假设我们有一个 User 类型，表示用户信息：

ts 
interface User {
  id: number;
  name: string;
  email: string;
  isAdmin: boolean;
}

const users: User[] = [
  { id: 1, name: "John Doe", email: "[email protected]", isAdmin: true },
  {
    id: 2,
    name: "Jane Smith",
    email: "[email protected]",
    isAdmin: false,
  },
];

在 Vue 3 中，你可以通过 defineComponent 来声明组件类型：

ts 
import { defineComponent } from "vue";

export default defineComponent({
  name: "UserList",
  data() {
    return {
      users: users,
    };
  },
});

通过这种方式，TypeScript 会自动为你的组件推导出类型。

API 类型自动生成

在现代前端开发中，API 与前端的交互是常见的需求。使用 TypeScript，你可以为后端接口自动生成类型，确保数据传输的类型安全。

使用 Swagger 或 OpenAPI 生成类型

你可以使用工具如 openapi-typescript 来根据 Swagger 或 OpenAPI 定义自动生成 TypeScript 类型：

bash 
npm install openapi-typescript --save-dev

通过该工具，你可以从 OpenAPI 的 swagger.json 或 openapi.json 文件中生成类型：

bash 
npx openapi-typescript https://api.example.com/openapi.json --output src/api/types.ts

生成的 types.ts 文件将包含所有接口的类型定义，确保前端与后端数据类型一致。

示例代码

假设你使用 OpenAPI 自动生成了一个 User 类型：

ts 
// src/api/types.ts
export interface User {
  id: number;
  name: string;
  email: string;
  isAdmin: boolean;
}

// 使用该类型进行 API 调用
import { User } from "./api/types";

const fetchUser = async (id: number): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return await response.json();
};

这样，TypeScript 会确保 API 的返回数据类型是正确的。

表单类型推导

表单处理是前端开发中不可避免的一部分，使用 TypeScript，你可以为表单字段定义类型，并进行类型推导，避免手动检查每个字段的类型。

使用 Zod 或 Yup 进行表单验证

可以使用 Zod 或 Yup 来为表单字段进行类型验证，确保表单数据符合预期。

Zod 示例

bash 
npm install zod
ts 
import { z } from "zod";

// 定义表单数据的类型
const userSchema = z.object({
  name: z.string().min(3),
  email: z.string().email(),
  isAdmin: z.boolean(),
});

type User = z.infer<typeof userSchema>;

const formData: User = {
  name: "John",
  email: "[email protected]",
  isAdmin: true,
};

// 验证数据
userSchema.parse(formData); // 如果验证失败，会抛出错误

通过 Zod 或 Yup，你可以对表单数据进行类型检查，并确保数据在提交之前是有效的。

小结

通过这些实战任务，你将熟悉 TypeScript 在实际开发中的应用，掌握如何处理常见的项目需求，并学会如何高效地与后端接口交互、进行表单验证以及自动生成类型。这些技能将大大提高你在 TypeScript 项目中的开发效率和代码质量。

相关内容