Generate typescript definitions for your C# models

Typescript is very nice to get strongly typed definitions for your client-side application. But when using a web api backend for your front end, you need to manually define typescript definitions file if you want to work with strongly typed models.

A simple way to avoid typing your interface definitions Is to generate them using the T4TS library.

To get started, open your nugget console manager and type

Install-Package T4TS

Now open one of your models and add the [T4TS.TypeScriptInterface] to your class

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;



namespace T4TS.Demo.Models

{

    [T4TS.TypeScriptInterface]

    public class T4TSDemoModel

    {

        public string Hello => "Hello world";

    }

}

 

When installing the T4TS nugget package, two files has been added to your project. Move these two files to your Scripts folder

  • tt
  • tt.settings.t4

Now open the T4TS.tt file and hit ctrl+s to generate your model definition. The template will search for all the classes with the TypeScriptInterfaceAttribute and generate typescript interfaces for them.

 

Now you can use your interface to get your strongly typed model on the client side

$.ajax({
    type: 'GET',
    url: '/Home/GetHelloWorldModel',
    success: function (data: T4TS.T4TSDemoModel) {
        
        alert(data.Hello);
    },
    
});

Submit a Comment

Your email address will not be published. Required fields are marked *

Share This