24

I'm searching for a way to automatically generate the TypesScript client code from a ASP.NET Core Web-Application (Currently using Visual Studio 2017RC and webpack).

Are there any existing tools to generate the TypeScript client either in the build pipeline from visual studio or with webpack? I tried to use swagger middleware and then generate to client from the swagger URL, but I'm not sure if the intermediate swagger generation is the right tool for the job. Also the disconnectedness from the build tools is not ideal.

Fionn
  • 10,975
  • 11
  • 54
  • 84
  • Have you tried any of these tools already in 2017? http://stackoverflow.com/questions/12957820/how-to-reuse-existing-c-sharp-class-definitions-in-typescript-projects – rodrigogq Dec 22 '16 at 04:49
  • https://github.com/Azure/autorest ;) – Tseng Dec 22 '16 at 07:07
  • @Tseng you may also want to try [Swagger Codegen](https://github.com/swagger-api/swagger-codegen) as well, which supports Typescript Node, Angular, Angular2, Fetch. – William Cheng Dec 22 '16 at 15:39

7 Answers7

23

  1. Both NSwag and Swashbuckle/swagger-codegen are awesome.

    1. Typewriter is another awesome option.

    2. So, here is how I would take the decision:

      • Need to generate TypeScript Models as per the C# models, go for TypeWriter

      • Need to generate complete client side code with command line that you can add as a build or publish step go for Swagger Code Gen

      • Need to play with the generated Swagger Spec or Generated Code to add your customizations - go for NSwag

      • Need to show Client inline code snippets in Swagger UI, use SwaggerUI-snippets
Gaurav Madaan
  • 459
  • 5
  • 9
18

You can add Swashbuckle to your ASP.NET Core webapp and then generate Swagger/OpenAPI spec.

With the Swagger/OpenAPI spec, you can then use Swagger Codegen to generate not only TypeScript API clients (Node, Angular, Angular2, Fetch), but also API clients in C#, Java, JS, Swift, etc as well as API documentation.

The easiest way to try Swagger Codegen is to use https://editor.swagger.io by importing your spec and then select the target API client/server you want to generate. (https://editor.swagger.io leverages https://generator.swagger.io to generate code and generator.swagger.io is powered by Swagger Codegen)

Swagger Codegen can also generate server stubs in C# Nancyfx or ASP.NET core so you may consider following the contract-first approach by writing the spec using https://editor.swagger.io and then generating both API clients and server stubs.

UPDATE: On May 2018, about 50 top contributors and template creators of Swagger Codegen decided to fork Swagger Codegen to maintain a community-driven version called OpenAPI Generator. Please refer to the Q&A for more information.

Yannick Meeus
  • 5,643
  • 1
  • 35
  • 34
William Cheng
  • 10,137
  • 5
  • 54
  • 79
  • Do you by chance know if Swagger Codegen supports inheritance for TypeScript/JS clients? – Tseng Dec 23 '16 at 13:29
13

Another option is NSwag which can generate Swagger specs from your ASP.NET (Core) controllers and TypeScript clients from this Swagger spec (for Angular, AngularJS, Fetch, etc.). The integration is very simple and it supports many advanced features (inheritance, named enums, code extensions, etc).

http://NSwag.org

Using the NSwagStudio UI it is very simple to get started and then you can automate everything with NPM package (i.e. running the config file in the cmd line).

enter image description here

I'm one of the authors of the project.

Rico Suter
  • 11,548
  • 6
  • 67
  • 93
  • Hi Rico, hopefully we can separate the files pretty soon, :) , also having issues with jsonstringify being overriden, however we love the tool overall ! –  Jun 21 '20 at 20:43
5

If you need to generate DTOs and API clients, then your options are

  • NSwag. The most popular tool for the job. But it generates everything in one file that makes it hard to maintain/debug.
  • Swagger Codegen or its fork with more features OpenAPI Generator. A Java-based option producing separate files, but with limited customisation.
  • AutoRest. A npm solution for packing up API clients in npm packages.
  • WebApiClientGen. A solution mentioned by the author below in this thread.
  • TypeWriter. VS extension, where you can craft your own implementation.

If you need DTOs only, then I'd look towards

More on these tools in this post - 6+ ways to marry C# with TypeScript.

Alex Klaus
  • 8,168
  • 8
  • 71
  • 87
2

You can also take a look at autorest.typescript client code generator. It provides good interfaces for all the model definitions, accurately defines readonly properties and enums. It supports a bunch of custom extensions that can be useful to improve the user experience of the generated client. You can take a look at some generated sample clients.

Bonus: The generated typescript client works in node.js and also in the browser.

Amar Zavery - MSFT
  • 391
  • 3
  • 7
2

If your TypeScript clients are with jQuery or Angular 2+, an alternative ASP.NET Web API Client Generators may be more handy, less overhead than swagger toolchain during SDLC.

And it supports .NET Core in addition to .NET Framework and .NET Standard.

ZZZ
  • 2,752
  • 2
  • 25
  • 37
1

Yet another option where you have full control over generated code is NTypewriter, which is basically Typewriter clone, but it uses Scriban syntax for templates.

NTypewriter example

NeVeS
  • 48
  • 1
  • 5