# 项目实战任务

URL: https://caijiao.org/ts/part4/project-practice
Source: docs/ts/part4/project-practice.md
Description: 通过实际项目任务来实践 TypeScript，帮助巩固所学知识，包括管理后台、API 类型自动生成和表单类型推导等任务。

通过实战任务来巩固 [TypeScript](/ts/) 的使用，能够帮助你加深对各个概念的理解。本章节将指导你完成一个小型管理后台的开发、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: "john.doe@example.com", isAdmin: true },
  {
    id: 2,
    name: "Jane Smith",
    email: "jane.smith@example.com",
    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: "john.doe@example.com",
  isAdmin: true,
};

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

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

## 小结

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