How to Generate TypeScript Models from ASP.NET Core DTOs Using OpenAPI

When building a React frontend on top of ASP.NET Core Web APIs, one of the biggest risks is model duplication.

You define DTOs in C#.

Then you manually recreate those same models in TypeScript.

That duplication creates drift.

Over time, the backend changes and the frontend silently breaks.

The professional solution is simple:

Generate your TypeScript models directly from your ASP.NET Core OpenAPI specification.

Let’s walk through how.

🧠 Step 1: Enable OpenAPI in ASP.NET Core

In your ASP.NET Core project, install Swagger support:

dotnet add package Swashbuckle.AspNetCore

Then configure it in Program.cs:

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

And enable middleware:

app.UseSwagger();
app.UseSwaggerUI();

Now your API exposes an OpenAPI specification at:

https://localhost:5001/swagger/v1/swagger.json

This JSON file describes your entire API contract.

This becomes the source of truth.

🔧 Step 2: Choose a TypeScript Generation Tool

There are two widely used tools in .NET ecosystems:

NSwag

OpenAPI Generator

Both can generate:

• TypeScript interfaces

• API client classes

• Strongly typed service methods

For ASP.NET Core teams, NSwag integrates very well.

🛠 Option 1: Using NSwag

Install NSwag CLI:

dotnet tool install --global NSwag.ConsoleCore

Create a configuration file:

{
  "runtime": "Net70",
  "documentGenerator": {
    "fromDocument": {
      "url": "https://localhost:5001/swagger/v1/swagger.json"
    }
  },
  "codeGenerators": {
    "openApiToTypeScriptClient": {
      "className": "ApiClient",
      "template": "Fetch",
      "typeScriptVersion": 4.7,
      "generateClientClasses": true,
      "generateDtoTypes": true,
      "output": "src/api/generated.ts"
    }
  }
}

Run:

nswag run

This generates:

• All DTO interfaces

• Strongly typed API client

• Typed request and response models

Now your React frontend uses the same contract as your backend.

No manual duplication.

🛠 Option 2: Using OpenAPI Generator

Install OpenAPI Generator:

npm install @openapitools/openapi-generator-cli -g

Generate TypeScript models:

openapi-generator-cli generate \
  -i https://localhost:5001/swagger/v1/swagger.json \
  -g typescript-fetch \
  -o src/api

This creates:

• Interfaces

• Typed API service functions

• Fetch based client

It works well with React applications.

🏗 Example: Before and After

Without generation, you manually define:

interface OrderDto {
  id: number;
  total: number;
  createdDate: string;
}

If backend changes, this may become outdated.

With generation:

The model is created automatically from:

public class OrderDto
{
    public int Id { get; set; }
    public decimal Total { get; set; }
    public DateTime CreatedDate { get; set; }
}

If the backend changes, regenerate types.

Frontend updates automatically.

🔄 Automating Generation

For professional projects:

Add a script in package.json:

"scripts": {
  "generate-api": "nswag run"
}

Run generation:

npm run generate-api

You can also:

• Integrate generation into CI pipelines

• Regenerate on every backend change

• Fail builds if API contract changes

This enforces strict backend frontend alignment.

⚙ Best Practices for Enterprise Projects

Generate types into a dedicated folder like:

src/api/generated

Do not manually edit generated files.

Create a thin wrapper layer if needed.

Regenerate whenever:

• DTOs change

• Endpoints are added

• Properties are renamed

Treat OpenAPI as your contract boundary.

🚀 Why This Matters in ASP.NET Core

ASP.NET Core is strongly typed.

If your React frontend is TypeScript and generated from OpenAPI:

You now have:

Strong backend

Strong frontend

Strong integration contract

This dramatically reduces:

• Integration bugs

• Runtime surprises

• Deployment failures

• Refactoring risk

For serious enterprise applications, this is a best practice.

🎯 Final Answer

How do you generate TypeScript models from ASP.NET Core DTOs?

1. Enable Swagger or OpenAPI in ASP.NET Core

2. Use NSwag or OpenAPI Generator

3. Generate TypeScript interfaces and clients

4. Automate regeneration

5. Treat OpenAPI as the contract source

This approach eliminates model duplication, protects against API drift, and creates a professional grade full stack architecture.

In large ASP.NET Core plus React systems, this is not optional.

It is foundational.