web-dev-qa-db-fra.com

Comment générer des interfaces TypeScript de base à partir d'un schéma Swagger?

Je cherche un moyen de générer des interfaces simplifiées TypeScript à partir d'un schéma Swagger. La plupart des solutions que je trouve sont inutilement compliquées. 

Je voudrais générer des interfaces comme ceci:

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,
}

À partir d'un schéma comme celui-ci: 

    {
  "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
9
Ivan Koshelev

Vous pouvez également consulter le générateur de code client autorest.TypeScript . Il fournit de bonnes interfaces pour toutes les définitions de modèle, définit avec précision les propriétés et les énumérations en lecture seule. Il supporte un tas d'extensions custom qui peuvent être utiles pour améliorer l'expérience utilisateur du client généré. Vous pouvez consulter quelques exemples de clients générés .

Bonus: le client TypeScript généré fonctionne dans node.js et également dans le navigateur à l'aide de webpack.

4
Amar Zavery - MSFT

Je ne sais pas si c'est une façon sensée de faire cela, c'est la première fois que je joue avec Swagger.

Je suis tombé sur le lien suivant et ai collé le schéma du projet que j'intègre. Dans le menu "Generate Client" (Générer le client), j'ai choisi l'un des préréglages TypeScript. Il a généré un projet minimal permettant d'extraire les bits dont j'avais besoin, une interface et des classes, etc.

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

J'ai essayé d'exécuter votre schéma. Voici un petit extrait du code généré:

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

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

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

Peut-être qu'avec un peu plus de peaufinage, vous obtiendrez exactement ce que vous recherchez.

Pour en savoir plus, consultez des outils tels que https://github.com/swagger-api/swagger-codegen mais l’éditeur Web en ligne est un moyen rapide et dangereux de le faire.

4
Amir Eldor

Vous pouvez essayer cet outil sw2dts , qui a généré du code comme ci-dessous:

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;

L'énumération Color semble avoir besoin d'un petit ajustement, qui devrait contenir les noms des propriétés sur lesquelles itérer, au lieu du nombre réel.

1
Alex Kon

Vous pouvez également simplement générer chaque interface à partir de chaque schéma avec un simple convertisseur JSON vers TypeScript http://json2ts.com/ . Ce n'est pas entièrement automatisé mais c'est mieux que rien ... et simple.

0
francoiscabrol