Converting ASP .Net Core Dto's and Controllers into TypeScript classes and interfaces

My concept involves incorporating two key elements:

  1. Converting C# Dto's (Data-transfer-objects) into TypeScript interfaces to ensure synchronization between client-side models and server-side.
  2. Transforming ASP .Net Core controller endpoints into TypeScript classes that utilize an http-service or similar mechanism. This is done to maintain alignment between client-side requests and the server.

Whenever a modification is made to a controller or dto, the generated TypeScript items should automatically update to stay aligned during development.

After conducting some research, I came across various Stack Overflow threads and other resources:

  • DTO to TypeScript generator suggests using the TypeLite library. While it seems promising, the documentation indicates a requirement for a [TsClass] Attribute or a class reference on startup. However, my project structure places all dtos in a *.Dtos namespace, making it difficult to apply TypeScript.Definitions().ForNameSpace(). Additionally, this only addresses the initial problem/idea.

  • Swashbuckly.AspNetCore could help generate swagger documentation from both controllers and dtos. The challenge lies in interpreting the swagger documentation and creating typescript classes and interfaces accordingly. One downside is that this method requires server startup, which I aim to avoid as it complicates updating upon file changes.

For context, this is a new project without any legacy code to update. All ASP .NET Core endpoints will return IActionResult to facilitate returning Ok(), BadRequest(), and so forth. Obtaining the return model may prove challenging since there's no straightforward way to retrieve the produced dto.

To resolve these issues, I have considered the following solutions:

  1. Create a separate package/application utilizing the Swashbuckly library to generate models and controllers without initiating the entire server.

  2. Add annotations to each endpoint, like [Produces(SomeDto)], followed by developing a small console application using reflection to gather information and generate TypeScript code. This approach, however, necessitates maintaining duplicate information to ensure consistency.

Unfortunately, neither of these strategies support auto-updating upon saving C# source files.

I am eager to engage in discussions and welcome any suggestions for improvement.

Answer №1

After considering your first point, I developed a unique C# DTO to TypeScript interface generator that utilizes MSBUILD tasks, ensuring complete independence from your existing workflow. While it may be slightly less stable since it works directly from the source, there is no need for any template files.

You can access this tool here or simply search for MTT on NuGet.

Answer №2

If you're still on the hunt.... I recommend checking out Typewriter for a possible solution. You have the ability to create templates that outline how and what transformations should take place.

While it doesn't fully meet my requirements as I require a tool with the capability to dynamically generate complex folder structures, they are working on implementing this feature in their upcoming v2 release.

Despite this limitation, Typewriter handles many tasks efficiently and is relatively simple to set up and configure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid invoking a TypeScript class like a regular function - _classCallCheck prevention

I am currently developing a TypeScript library that needs to be compatible with all versions of JavaScript. I have noticed that when calling a class in TS without using new, it does not compile properly, which is expected. In ES6/Babel, a class automatica ...

Tips for updating the front end with the status of a lengthy playwright test

In the node backend, I have defined a route for test progress using SSE (https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events). The URL initialization is happening on the frontend. Below is the code snippet from th ...

Retrieving information from the controller within the error callback of a jQuery AJAX request in ASP.NET MVC

I've been working with a jQuery ajax script that looks like this: $.ajax({ type: "POST", url: "Main/receive", // the method we are calling contentType: "application/json; charset=utf-8", data: JSON. ...

Access the document within the Angular Material File Selection feature

I have implemented a Material file selection feature in my project. The code snippet below shows how I am doing it: <label for="uploadPicture" class="upload-file"> <mat-icon>add_a_photo</mat-icon> </label> <input type="file" ...

How to send data from JavaScript to ASP.NET

$(document).ready(function () { $("#MainContent_ddlFieldName").on("change", function () { var id = $(this).val(); var name = $(this + "option:selected").text(); $('#<%= lblValue.ClientID %> ...

Tips for clearing a text field using Selenium in C# before entering new keys

I am currently developing a selenium test that involves sending an incorrect string of letters, submitting it, receiving an error, and then sending a correct string of letters to be accepted. The challenge I am facing in my test is that the first set of l ...

Creating a one-of-a-kind entry by adding a number in JavaScript

I am looking for a way to automatically add an incrementing number to filenames in my database if the filename already exists. For example, if I try to add a file with the name DOC and it is already present as DOC-1, then the new filename should be DOC-2. ...

What could be causing the ngx-chart TreeMap labels to not display in IE11?

I am currently utilizing ngx-charts version 10.0.1 to create Treemap charts. My Angular version is 7.2.1. The chart functions as expected in Chrome, but the labels do not appear in IE11. Upon page load, I encounter the following errors in the IE console: ...

What is the best method to completely uninstall Apollo-Angular along with all of its dependencies?

Once I added apollo-angular and @apollo/client to my project, I quickly realized that I no longer needed them. However, simply using "npm uninstall apollo-angular" and "npm uninstall @apollo/client" only removed the main folders but left behind other Apoll ...

The validation of DOM nesting has detected that a <td> element cannot be placed within an <a> element

When working on a React project with Material UI, I encountered an issue while trying to create a table. My goal was to make the entire row clickable, directing users to a page with additional information on the subject. Below is the snippet of code for th ...

"Creating a visual representation of models exchanged between the client and server through Rest

Currently, I am working on a project that involves client-server communication via rest API, with Angular 2 calling restful web services as the primary method. The client side is written in Typescript, which is a subset of JavaScript. My main challenge li ...

"Enhance Your Asp.net Search Functionality with this Exciting jQuery Plugin

Currently, I have a website built on Asp.net Web Forms and I am looking to enhance the search experience by using a plugin. I specifically want to utilize a cached dataset for faster search results. Most jQuery chosen select plugins are not compatible with ...

Creating packages for multiple Typescript projects that rely on a shared local module

I am currently developing a series of VSTS extensions, with each extension being its own independent Node project complete with its own package.json file and node_modules folder. The structure of the folders is as follows: - MyExtension - package.json ...

Despite passing the same dependency to other services, the dependencies in the constructor of an Angular2 Service are still undefined

To successfully integrate the "org-agents-service" into the "org-agents-component," I need to resolve some dependencies related to the required api-service. Other components and services in the hierarchy are also utilizing this api-service, which acts as a ...

Webpack, TypeScript, and modules are set to "esnext," resulting in a change to undefined

In my setup, I am using webpack with typescript (via ts-loader). To enable code splitting in webpack, it is necessary to adjust the module setting to esnext in the tsconfig file: // tsconfig.json { "compilerOptions": { "module": ...

Having trouble accessing a downloaded image saved in local files from Amazon S3 using the AWS SDK in Node.js

I am currently using the node.js aws-sdk package to download files from s3 storage. However, when I download a jpeg image and save it as a local file, I am unable to view it. Is this the correct method for downloading jpeg images? public async downloadFi ...

In the context of React Typescript, the term 'Component' is being mistakenly used as a type when it actually refers to a value. Perhaps you intended to use 'typeof Component' instead?

Looking to create a routes array and apply it to useRoutes in react-router@6. I am currently using TypeScript and Vite. However, I encountered an error when attempting to assign my component to the 'element' key. type HelloWorld = /unresolved/ ...

Angular: How to Disable Checkbox

Within my table, there is a column that consists solely of checkboxes as values. Using a for loop, I have populated all values into the table. What I have accomplished so far is that when a checkbox is enabled, a message saying "hey" appears. However, if m ...

The onClick functionality of a button may not work properly when nested within a DIV element in an ASP.NET project

Here is a snippet of code that includes a <div> element: <div id="specific"> <table cellpadding="2" border="0"> <tr><td>Choose category</td><td><select id="list_categories" runat="server"></select>< ...

NestJS endpoint throwing a 500 error after submitting a post request

Struggling with sending post requests in NestJS as they are returning an error message: ERROR: An error occurred in POST /api/fraud-rules in 8ms... { "isError": true, "status": 500, "name": "InternalError", & ...