### Generate a TypeScript Client with Tags { #generate-a-typescript-client-with-tags }

If you generate a client for a FastAPI app using tags, it will normally also separate the client code based on the tags.

This way, you will be able to have things ordered and grouped correctly for the client code:

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

In this case, you have:

frontend-app@1.0.0 generate-client /home/user/code/frontend-app
> openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios
```

</div>

此命令将在 `./src/client` 中生成代码，并将在其内部使用 `axios`（前端HTTP库）。

### 尝试客户端代码

现在您可以导入并使用客户端代码，它可能看起来像这样，请注意，您可以为这些方法使用自动补全：

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

您还将自动补全要发送的数据：

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

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

Вы также получите автозавершение для отправляемой полезной нагрузки:

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

/// tip | Совет

Обратите внимание на автозавершение для `name` и `price`, это было определено в приложении FastAPI, в модели `Item`.

Ahora puedes importar y usar el código del cliente. Podría verse así, nota que tienes autocompletado para los métodos:

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

También obtendrás autocompletado para el payload a enviar:

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

/// tip | Consejo

Nota el autocompletado para `name` y `price`, que fue definido en la aplicación de FastAPI, en el modelo `Item`.

Shinsuke Sugaya <******@****.***> 1764835356 +0900

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

Sie werden auch eine automatische Vervollständigung für die zu sendende Payload erhalten:

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

/// tip | Tipp

Agora você pode importar e usar o código do cliente. Poderia ser assim, observe que você obtém preenchimento automático para os métodos:

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

Você também obterá preenchimento automático para o corpo a ser enviado:

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

/// tip | Dica

Observe o preenchimento automático para `name` e `price`, que foi definido na aplicação FastAPI, no modelo `Item`.

        readmeTemplates.convention(layout.projectDirectory.dir("src/samples/readme-templates"))
        target.convention(layout.buildDirectory.dir("generated-samples/$buildInitType" + if (modularizationOption.isMulti()) "-with-libraries" else ""))
        type = buildInitType
        modularization = modularizationOption
    }
    samples.publishedSamples.create(sampleName) {

Jendrik Johannes <******@****.***> 1607501645 +0100

First, write all your **FastAPI** application as normally:

{* ../../docs_src/extending_openapi/tutorial001_py39.py hl[1,4,7:9] *}

### Generate the OpenAPI schema { #generate-the-openapi-schema }

Then, use the same utility function to generate the OpenAPI schema, inside a `custom_openapi()` function:

{* ../../docs_src/extending_openapi/tutorial001_py39.py hl[2,15:21] *}