```

### 生成带有标签的 TypeScript 客户端

如果您使用标签为FastAPI应用生成客户端，它通常也会根据标签分割客户端代码。

通过这种方式，您将能够为客户端代码进行正确地排序和分组：

<img src="/img/tutorial/generate-clients/image06.png">

在这个案例中，您有：

* `ItemsService`
* `UsersService`

### 客户端方法名称

现在生成的方法名像 `createItemItemsPost` 看起来不太简洁:

```TypeScript
ItemsService.createItemItemsPost({name: "Plumbus", price: 5})
```

Es gibt auch mehrere andere Unternehmen, welche ähnliche Dienste anbieten und die Sie online suchen und finden können. 🤓

## Einen TypeScript-Frontend-Client generieren

Beginnen wir mit einer einfachen FastAPI-Anwendung:

=== "Python 3.9+"

    ```Python hl_lines="7-9  12-13  16-17  21"
    {!> ../../../docs_src/generate_clients/tutorial001_py39.py!}

Так как параметры в нём описываются с помощью типов TypeScript (аналогично подсказкам типов в Python), поддержка редактора работает довольно хорошо.

Но поскольку данные из TypeScript не сохраняются после компиляции в JavaScript, он не может полагаться на подсказки типов для определения проверки данных, сериализации и документации.

Оскільки параметри описані за допомогою типів TypeScript (подібно до підказок типу Python), підтримка редактора досить хороша.

Parametreler TypeScript tipleri (Python tip belirteçlerine benzer) ile açıklandığından editör desteği oldukça iyi.

Como os parâmetros são descritos com tipos TypeScript (similar aos _type hints_ do Python), o suporte ao editor é muito bom.

There are also several other companies offering similar services that you can search and find online. 🤓

## Generate a TypeScript Frontend Client

Let's start with a simple FastAPI application:

=== "Python 3.9+"

    ```Python hl_lines="7-9  12-13  16-17  21"
    {!> ../../../docs_src/generate_clients/tutorial001_py39.py!}
    ```

* **Vue** 前端：
    * 由 Vue CLI 生成
    * **JWT 身份验证**处理
    * 登录视图
    * 登录后显示主仪表盘视图
    * 主仪表盘支持用户创建与编辑
    * 用户信息编辑
    * **Vuex**
    * **Vue-router**
    * **Vuetify** 美化组件
    * **TypeScript**
    * 基于 **Nginx** 的 Docker 服务器（优化了 Vue-router 配置）
    * Docker 多阶段构建，无需保存或提交编译的代码
    * 在构建时运行前端测试（可禁用）
    * 尽量模块化，开箱即用，但仍可使用 Vue CLI 重新生成或创建所需项目，或复用所需内容
* 使用 **PGAdmin** 管理 PostgreSQL 数据库，可轻松替换为 PHPMyAdmin 或 MySQL

Comme les paramètres sont décrits avec des types TypeScript (similaires aux type hints de Python), la prise en charge
par l'éditeur est assez bonne.

    - 💾 [PostgreSQL](https://www.postgresql.org) as the SQL database.
- 🚀 [React](https://react.dev) for the frontend.
    - 💃 Using TypeScript, hooks, Vite, and other parts of a modern frontend stack.
    - 🎨 [Chakra UI](https://chakra-ui.com) for the frontend components.
    - 🤖 An automatically generated frontend client.
    - 🦇 Dark mode support.