OpenAPI 轉 TypeScript 轉換器

在瀏覽器中,將 OpenAPI 3.x 文件直接轉換為 TypeScript 型別,並支援常見的 openapi-typescript 產生選項。

OpenAPI 文件
貼上 OpenAPI 3.0 或 3.1 的 JSON 或 YAML 文件、從檔案匯入,或從支援 CORS 的 URL 取得。
TypeScript 輸出
產生的 TypeScript 型別會透過瀏覽器安全的 openapi-typescript 流程與下方選項產生。
/**
 * This file was auto-generated by openapi-typescript.
 * Do not make direct changes to the file.
 */

export interface paths {
    "/users": {
        parameters: {
            query?: never;
            header?: never;
            path?: never;
            cookie?: never;
        };
        get: {
            parameters: {
                query?: never;
                header?: never;
                path?: never;
                cookie?: never;
            };
            requestBody?: never;
            responses: {
                /** @description OK */
                200: {
                    headers: {
                        [name: string]: unknown;
                    };
                    content: {
                        "application/json": components["schemas"]["User"][];
                    };
                };
            };
        };
        put?: never;
        post?: never;
        delete?: never;
        options?: never;
        head?: never;
        patch?: never;
        trace?: never;
    };
}
export type webhooks = Record<string, never>;
export interface components {
    schemas: {
        User: {
            id: string;
            name: string;
            /** @enum {string} */
            role?: "admin" | "editor" | "viewer";
        };
    };
    responses: never;
    parameters: never;
    requestBodies: never;
    headers: never;
    pathItems: never;
}
export type $defs = Record<string, never>;
export type operations = Record<string, never>;
產生選項
不修改來源文件,也能調整產生出來的型別。

什麼是 OpenAPI 轉 TypeScript 轉換器?

OpenAPI 轉 TypeScript 轉換器會直接在瀏覽器中,將 OpenAPI 3.x 文件轉換為產生的 TypeScript 型別。當你需要快速預覽型別、可下載的宣告檔,或是在不把 schema 傳到伺服器的情況下安全測試 openapi-typescript 選項時,這個工具特別有用。

何時使用

當你已經有 JSON 或 YAML 格式的 OpenAPI schema,並想為前端應用程式、SDK 原型或 API 審查取得具型別的請求與回應模型時,可以使用這個工具。它特別適合在你把輸出提交到儲存庫之前,比較不同產生選項的差異。

產生前

這個瀏覽器重寫版支援已打包的 OpenAPI 3.0 與 3.1 文件。如果你的 schema 仍包含外部 $ref 目標,請先將它們合併或內嵌,然後再在這裡產生最終的 TypeScript 輸出。