Automatically generate TypeScript client code for ASP.NET Core controllers

Question

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.

Solution 1

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

   2. Typewriter is another awesome option.

   3. 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

Solution 2

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.

Solution 3

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).

I'm one of the authors of the project.

Solution 4

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

• Reinforced.Typings
• TypeGen

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

Solution 5

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.

View more solutions

Comments

[Tseng]

Do you by chance know if Swagger Codegen supports inheritance for TypeScript/JS clients?