如何从Swagger schema生成基本的TypeScript接口?

alen0pnh  于 12个月前  发布在  TypeScript
关注(0)|答案(9)|浏览(256)

我正在寻找一种从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,
}

从这样一个schema:

{
  "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": {}
}
e37o9pze

e37o9pze1#

您还可以看看autorest.typescript客户端代码生成器。它为所有的模型定义提供了良好的接口,准确地定义了只读属性和枚举。它支持一系列custom extensions,这些custom extensions对于改善生成的客户端的用户体验非常有用。你可以看看生成的sample clients
额外的好处:生成的typescript客户端可以在node.js中工作,也可以在webpack的帮助下在浏览器中工作。

i2loujxw

i2loujxw2#

你可以试试这个工具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枚举似乎需要一点调整,它应该包含要转换的属性的名称,而不是真实的数字。

mpgws1up

mpgws1up3#

我在寻找一个只生成类型而不生成任何可运行代码的包。我认为这与问题中的要求是一样的。我发现最接近生成类型的是这个包:
https://www.npmjs.com/package/@manifoldco/swagger-to-ts
使用2.0.0的@manifoldco/swagger-to-ts将为问题中的模式生成以下内容:

/**
 * This file was auto-generated by swagger-to-ts.
 * Do not make direct changes to the file.
 */

export interface definitions {
  Bar: { A?: string; B: number; C: string; Baz?: definitions["Baz"] };
  Baz: { D: number; Color: definitions["Color"] };
  Color: "0" | "1" | "2";
}

注意:有一个包的名称与此类似,没有任何组织前缀。确保你尝试了一个带有@manifoldco前缀的。起初我错过了这个细节,非常困惑:-)。

f8rj6qna

f8rj6qna4#

1.首先从swagar下载schema.json文件
1.安装openapi(它也适用于JavaScript和typescript)
1.运行

npx openapi-typescript https://example.com/swagger/v1/swagger.json --output generated-type.ts

现在你可以看到在你的项目文件夹中创建了一个.ts文件。(我把exmaple for .ts文件放在使用.js的人的.js而不是.ts)

bxjv4tth

bxjv4tth5#

关于https://stackoverflow.com/a/43513850/4948492
Swagger Codegen为各种语言和框架(包括Node.js)生成服务器存根和客户端SDK。
要生成Node.js服务器存根,请使用-l nodejs-server参数运行codegen。
示例(Mac):

swagger-codegen generate -l typescript-angular -i swagger.yaml -o ~/Downloads/ts-test
j91ykkif

j91ykkif6#

你也可以用一个简单的json到typescript转换器http://json2ts.com/从每个模式生成每个接口。它不是全自动的,但总比没有好...和简单.

szqfcxe2

szqfcxe27#

不知道这样做是否明智,这是我第一次和斯威格一起玩。
我无意中看到了下面的链接,并粘贴了我所集成的项目中的模式。从顶部的“生成客户端”菜单中,我选择了一个TypeScript脚本,它生成了一个最小的项目,我可以从中提取我需要的位,接口和类等。
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编辑器是一种快速而肮脏的方式来做到这一点。

nhaq1z21

nhaq1z218#

我使用swagger-typescript-api从swagger模式生成接口

npx swagger-typescript-api -p PATH_TO_YOUR_SCHEMA -o ./
bybem2ql

bybem2ql9#

我使用dtsgen,它在我的情况下工作得很好。

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

相关问题