OpenAPI と型 | Mita.ts #1

- Mita.ts #1
- GitHub

Transcript

1. OpenAPI と型 Mita.ts#1 2024/08/28(Wed) 小林 和弘
2. OpenAPI とは HTTP API を記述するための標準仕様 API がどのように機能するか API がどのように連携するか テストを作成 クライアントコードを生成（型も生成） https://www.openapis.org/
3. Example https://github.com/kzhrk/mita.ts-1/blob/main/spec.yml openapi: "3.0.0" info: version: 1.0.0 title: Sample paths: /items: get: summary: アイテム一蘭取得 operationId: getItems tags: - items parameters: - name: page in: query required: false schema: type: integer maximum: 100 format: int32 responses: '200':
4. 型を生成する方法 OpenAPI generator OpenAPI TypeScript
5. OpenAPI generator Docker npm cf. Generators List https://openapi-generator.tech/docs/installation/ docker run -t --rm \ -v ${CURDIR}:/local openapitools/openapi-generator-cli generate \ -i local/spec.yml \ -g typescript-axios \ -o local/sample/openapi-generator npx @openapitools/openapi-generator-cli generate \ -i ./spec.yml \ -g typescript-axios \ -o ./sample/openapi-generator
6. 出力した型を読み込む OpenAPI で定義した operationId とステータスコードを元に抽象化された型が出力される。 import type { GetItems200ResponseInner } from './sample/typescript-axios'; const item: GetItems200ResponseInner = { id: 1, name: '', }
7. OpenAPI TypeScript https://openapi-ts.dev/ npx openapi-typescript ./spec.yml -o ./sample/openapi-typescript/schema.d.ts
8. 出力した型を読み込む OpenAPI のパスと operationId の巨大な interface が提供される。 import type { paths, operations } from './sample/openapi-typescript/schema'; type Item = paths['/items/{itemId}']['get']['responses']['200']['content']['application/json']; type Item2 = operations['getItem']['responses']['200']['content']['application/json']; const item: Item = { id: 1, name: '', }; const item2: Item2 = { id: 1, name: '', };
9. まとめ OpenAPI generators generator から言語が選べる 抽象化した型を提供する OpenAPI TypeScript paths, operations の巨大な interface を提供する openapi-fetch でテストのモックなども提供する
10. （時間が余ったら）自己紹介 { "name": "小林 和弘", "job": "Frontend Engineer@Medpeer", "x_twitter": "@kzhrk0430", "github": "kzhrk" }
11. 👏 ご清聴ありがとうございました 👏