web-dev-qa-db-ja.com

Swaggerスキーマから基本的なTypeScriptインターフェイスを生成する方法は？

Swaggerスキーマから単純なTypeScriptインターフェイスを生成する方法を探しています。私が見つけるほとんどのソリューションは、不必要に複雑です。

次のようなインターフェイスを生成したいと思います。

export interface IBar {
    a?: string;
    b: number;
    c: Date;
    baz?: IBaz;
}

export interface IBaz {
    d: number;
    color: Color;
}

export enum Color {
    RED = 0,
    GREEN = 1,
    BLUE = 2,
}

このようなスキーマから：

    {
  "x-generator": "NSwag v11.14.0.0 (NJsonSchema v9.10.24.0 (Newtonsoft.Json v9.0.0.0))",
  "swagger": "2.0",
  "info": {
    "title": "",
    "version": ""
  },
  "schemes": [],
  "consumes": [
    "application/json"
  ],
  "produces": [
    "application/json"
  ],
  "paths": {
    "/api/Foo/GetBarDescriptions": {
      "get": {
        "tags": [
          "Foo"
        ],
        "operationId": "Foo_GetBarDescriptions",
        "parameters": [],
        "responses": {
          "200": {
            "description": "",
            "schema": {
              "type": "array",
              "items": {
                "type": "string"
              }
            },
            "x-nullable": true
          }
        }
      }
    },
    "/api/Foo/GetBar": {
      "get": {
        "tags": [
          "Foo"
        ],
        "operationId": "Foo_GetBar",
        "parameters": [
          {
            "type": "integer",
            "name": "id",
            "in": "query",
            "required": true,
            "x-nullable": false,
            "format": "int32"
          }
        ],
        "responses": {
          "200": {
            "description": "",
            "schema": {
              "$ref": "#/definitions/Bar"
            },
            "x-nullable": true
          }
        }
      }
    },
    "/api/Foo/SetBar": {
      "post": {
        "tags": [
          "Foo"
        ],
        "operationId": "Foo_SetBar",
        "parameters": [
          {
            "name": "value",
            "in": "body",
            "required": true,
            "schema": {
              "$ref": "#/definitions/Bar"
            },
            "x-nullable": true
          }
        ],
        "responses": {
          "204": {
            "description": ""
          }
        }
      }
    }
  },
  "definitions": {
    "Bar": {
      "type": "object",
      "additionalProperties": false,
      "required": [
        "B",
        "C"
      ],
      "properties": {
        "A": {
          "type": "string"
        },
        "B": {
          "type": "integer",
          "format": "int32"
        },
        "C": {
          "type": "string",
          "format": "date-time"
        },
        "Baz": {
          "$ref": "#/definitions/Baz"
        }
      }
    },
    "Baz": {
      "type": "object",
      "additionalProperties": false,
      "required": [
        "D",
        "Color"
      ],
      "properties": {
        "D": {
          "type": "number",
          "format": "decimal"
        },
        "Color": {
          "$ref": "#/definitions/Color"
        }
      }
    },
    "Color": {
      "type": "integer",
      "description": "",
      "x-enumNames": [
        "RED",
        "GREEN",
        "BLUE"
      ],
      "enum": [
        0,
        1,
        2
      ]
    }
  },
  "parameters": {},
  "responses": {},
  "securityDefinitions": {}
}
typescriptswaggercode-generation
13
Ivan Koshelev

これが正しい方法であるかどうかはわかりませんが、Swaggerで遊んでいるのは初めてです。

私は次のリンクにぶつかり、統合するプロジェクトからスキーマを貼り付けました。上部の[クライアントの生成]メニューから、TypeScriptプリセットの1つを選択し、必要なビット、インターフェイス、クラスなどを抽出できる最小限のプロジェクトを生成しました。

http://editor.swagger.io/#/

スキーマを実行してみました。生成されたコードの小さな抜粋を次に示します。

export interface Bar {
    "a"?: string;
    "b": number;
    "c": Date;
    "baz"?: Baz;
}

export interface Baz {
    "d": number;
    "color": Color;
}

/**
 * 
 */
export type Color = "0" | "1" | "2";

たぶんもう少し調整すれば、まさにあなたが探しているものを作ることができます。

さらに読むと https://github.com/swagger-api/swagger-codegen のようなツールに関するものかもしれませんが、オンラインWebエディターはこれを行うための迅速で汚い方法です。

7
Amir Eldor

autorest.TypeScript クライアントコードジェネレーターもご覧ください。すべてのモデル定義に適切なインターフェイスを提供し、読み取り専用のプロパティと列挙型を正確に定義します。生成されたクライアントのユーザーエクスペリエンスを向上させるのに役立つ多くの カスタム拡張 をサポートします。生成された サンプルクライアント を確認できます。

ボーナス：生成されたTypeScriptクライアントは、node.jsで動作し、webpackの助けを借りてブラウザーでも動作します。

4
Amar Zavery - MSFT

このツールを試すことができます sw2dts 、以下のようなコードを生成しました：

export interface Bar {
    A?: string;
    B: number; // int32
    C: string; // date-time
    Baz?: Baz;
}
export interface Baz {
    D: number; // decimal
    Color: Color;
}
/**
 * 
 */
export type Color = 0 | 1 | 2;

Color列挙には、実際の番号の代わりに、反復するプロパティの名前を含む必要がある、少し調整が必要なようです。

2
Alex Kon

https://stackoverflow.com/a/43513850/4948492 に触発されました：

Swagger Codegen は、Node.jsを含むさまざまな言語とフレームワークのサーバースタブとクライアントSDKを生成します。

Node.jsサーバースタブを生成するには、-l nodejs-server引数。

例（Mac）：

swagger-codegen generate -l TypeScript-angular -i swagger.yaml -o ~/Downloads/ts-test
0
Clemens

dtsgen を使用し、私の場合はうまく機能します。

yarn dtsgen --out ./path/to/generated-types.d.ts ./path/to/input/swagger.json.or.yml
0
EnixCoda

また、単純なjsonからTypeScriptへのコンバーター http://json2ts.com/ を使用して、各スキーマから各インターフェイスを生成することもできます。完全に自動化されているわけではありませんが、何よりも優れています...そしてシンプルです。

0
francoiscabrol