如果您正在开发**前端**，一个非常有趣的替代方案是 <a href="https://github.com/hey-api/openapi-ts" class="external-link" target="_blank">openapi-ts</a>。

## 生成一个 TypeScript 前端客户端

让我们从一个简单的 FastAPI 应用开始：

{* ../../docs_src/generate_clients/tutorial001_py39.py hl[7:9,12:13,16:17,21] *}

请注意，*路径操作* 定义了他们所用于请求数据和回应数据的模型，所使用的模型是`Item` 和 `ResponseMessage`。

### API 文档

如果您访问API文档，您将看到它具有在请求中发送和在响应中接收数据的**模式(schemas)**：

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

Pour ces cas, vous pouvez spécifier un appel à `jsonable_encoder` pour convertir vos données avant de les passer à une réponse :

{* ../../docs_src/response_directly/tutorial001.py hl[6:7,21:22] *}

/// note | Détails techniques

Vous pouvez aussi utiliser `from starlette.responses import JSONResponse`.

## `Field` 임포트

먼저 이를 임포트해야 합니다:

{* ../../docs_src/body_fields/tutorial001_an_py310.py hl[4] *}

/// warning | 경고

`Field`는 다른 것들처럼 (`Query`, `Path`, `Body` 등) `fastapi`에서가 아닌 `pydantic`에서 바로 임포트 되는 점에 주의하세요.

///

## 모델 어트리뷰트 선언

그 다음 모델 어트리뷰트와 함께 `Field`를 사용할 수 있습니다:

{* ../../docs_src/body_fields/tutorial001_an_py310.py hl[11:14] *}

`Field`는 `Query`, `Path`와 `Body`와 같은 방식으로 동작하며, 모두 같은 매개변수들 등을 가집니다.

## 예시

위의 몇몇 자료형을 매개변수로 사용하는 *경로 작동* 예시입니다.

{* ../../docs_src/extra_data_types/tutorial001_an_py310.py hl[1,3,12:16] *}

함수 안의 매개변수가 그들만의 데이터 자료형을 가지고 있으며, 예를 들어, 다음과 같이 날짜를 조작할 수 있음을 참고하십시오:

# WebSocket 테스트하기

`TestClient`를 사용하여 WebSocket을 테스트할 수 있습니다.

이를 위해 `with` 문에서 `TestClient`를 사용하여 WebSocket에 연결합니다:

{* ../../docs_src/app_testing/tutorial002.py hl[27:31] *}

/// note | 참고

자세한 내용은 Starlette의 <a href="https://www.starlette.dev/testclient/#testing-websocket-sessions" class="external-link" target="_blank"> WebSocket 테스트</a>에 관한 설명서를 참고하시길 바랍니다.

{* ../../docs_src/dependencies/tutorial001_an_py310.py hl[3] *}

### Declarar la dependencia, en el "dependant" { #declare-the-dependency-in-the-dependant }

De la misma forma en que usas `Body`, `Query`, etc. con los parámetros de tu *path operation function*, usa `Depends` con un nuevo parámetro:

{* ../../docs_src/dependencies/tutorial001_an_py310.py hl[13,18] *}

Puedes usar el mismo `TestClient` para probar WebSockets.

Para esto, usas el `TestClient` en un statement `with`, conectándote al WebSocket:

{* ../../docs_src/app_testing/tutorial002_py39.py hl[27:31] *}

/// note | Nota

Para más detalles, revisa la documentación de Starlette sobre <a href="https://www.starlette.dev/testclient/#testing-websocket-sessions" class="external-link" target="_blank">probar WebSockets</a>.

Please replace ``endpoint_url``,``aws_access_key_id``, ``aws_secret_access_key``, ``Bucket`` and ``Key`` with your local setup in this ``select.py`` file.

```py
#!/usr/bin/env/env python3
import boto3

s3 = boto3.client('s3',
                  endpoint_url='http://localhost:9000',
                  aws_access_key_id='minio',

中间件参数接收如下参数:

* `request`.
* 一个函数 `call_next` 它将接收 `request` 作为参数.
    * 这个函数将 `request` 传递给相应的 *路径操作*.
    * 然后它将返回由相应的*路径操作*生成的 `response`.
* 然后你可以在返回 `response` 前进一步修改它.

{* ../../docs_src/middleware/tutorial001.py hl[8:9,11,14] *}

/// tip

请记住可以 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers" class="external-link" target="_blank">用'X-' 前缀</a>添加专有自定义请求头.

For those cases, you can use the `jsonable_encoder` to convert your data before passing it to a response:

{* ../../docs_src/response_directly/tutorial001_py310.py hl[5:6,20:21] *}

/// note | Technical Details

You could also use `from starlette.responses import JSONResponse`.