Skip to content

reinforced/Reinforced.Typings

Repository files navigation

What is that?

You develop frontend applications with TypeScript and .NET Backend? You need Reinforced.Typings.

It converts .NET classes into TypeScript code. Suffering has ended - you don't need to write and maintain boring TypeScript glue code for your DTOs/ViewModels/APIs anymore - RT can generate it from C# app. Moreover, it integrates with MSBuild build process and (re)generates glue code every time you rebuild .NET backend. So you get immediately notified when backend's API/DTOs changed and frontend is broken.

Check out documentation to discover numbers of useful features (type substitutions, modules, code generators, fluent configuration, multi-file export, JSDOC).

Reinforced.Typings is available on NuGet.

PM> Install-Package Reinforced.Typings

Find out detailed information in Reinforced.Typings wiki

News

Version 1.6.3 released

  • Support of .NET 8

Support policy

Please do not ask your questions in github issues anymore. Such format is not suitable for storing FAQ. If you have question - please go to StackOverflow and ask it there. Tag your question with reinforced-typings tag. I watch full list of questions and will answer ASAP. Make experience that you've got available for other users!

UPD: You can notify me about question by sending link via Twitter (@reinforced_sc) to get answer faster.

GitHub issues are for confirmed bugs/feature requests now. If you've found bug - please write and PR test if you can. If you have feature idea - please describe it from fluent/attribute configuration point of view. Describe how'd you gonna to configure RT for desired result. Thanks in advance!

Best to be used for

Exporting ViewModels

C#TypeScript
namespace MyApp
{
    using Reinforced.Typings.Attributes;
[TsInterface]
public class Order
{
    public string ItemName { get; set; }
    public int Quantity { get; set; }
    public double Subtotal { get; set; }
    public bool IsPaid { get; set; }
    public string ClientName { get; set; }
    public string Address { get; set; }
}

[TsClass]
public class User
{
    public string FirstName { get; set; }
    public string Email { get; set; }
    public UserType Type { get; set; }
}

[TsEnum]
public enum UserType { One, Two }

}

module MyApp {
	export interface IOrder
	{
		ItemName: string;
		Quantity: number;
		Subtotal: number;
		IsPaid: boolean;
		ClientName: string;
		Address: string;
	}
	export class User
	{
		public FirstName: string;
		public Email: string;
		public Type: MyApp.UserType;
	}
	export enum UserType { 
		One = 0, 
		Two = 1, 
	}
}	
	

...even complex ViewModels

C#TypeScript
namespace MyApp
{
    using Reinforced.Typings.Attributes;
[TsInterface]
public class Page
{
    public List<Order> Orders { get; set; }

    public Dictionary<int, Order> 
                    Cache { get; set; }

    public string[] Tags { get; set; }

    public IEnumerable<object> 
                    Things { get; set; }
}

}

module MyApp {
	export interface IPage
	{
		Orders: MyApp.IOrder[];
		Cache: { [key:number]: MyApp.IOrder };
		Tags: string[];
		Things: any[];
	}
}	
	

Temporary disabling TypeScript compilation in your project

Now you will not stay powerless when generated typings fail your TypeScript build in project. See RtBypassTypeScriptCompilation configuration parameter.

Inheritance preservation

C#TypeScript
namespace MyApp
{
    using Reinforced.Typings.Attributes;
public interface INonExport
{
    string Boom { get; }
}

[TsInterface]
public class WithoutInterface
            : INonExport
{
    public string Boom { get; set; }
}

[TsInterface]
public interface IEntity
{
    int Id { get; set; }
}

[TsInterface]
public class User : IEntity
{
    public int Id { get; set; }

    public string Login { get; set; }
}

}

module MyApp {
	export interface IWithoutInterface
	{
		Boom: string;
	}
	export interface IEntity
	{
		Id: number;
	}
	export interface IUser extends MyApp.IEntity
	{
		Id: number;
		Login: string;
	}
}	
	

Use fluent configuration

Details can be found on the corresponding wiki page

C#TypeScript
namespace MyApp
{
    using Reinforced.Typings.Fluent;
    using System.Web.Mvc;
public class Configuration
{
    public static void 
        Configure(ConfigurationBuilder builder)
    {
        builder
        	.ExportAsInterface<SelectListItem>()
            .OverrideNamespace("MyApp")
            .WithPublicProperties();
    }
}

}

module MyApp {
	export interface ISelectListItem
	{
		Disabled: boolean;
		Group: any;
		Selected: boolean;
		Text: string;
		Value: string;
	}
}	
	
Reinforced.Typings.settings.xml: <RtConfigurationMethod>MyApp.Configuration.Configure</RtConfigurationMethod>

Generate any custom glue code

Read more here.

C#TypeScript
namespace MyApp
{
    using Reinforced.Typings.Fluent;
    using System.Web.Mvc;
[TsClass(CodeGeneratorType = typeof(AngularControllerGenerator)]
public class AngularController : Controller
{
    [AngularMethod(typeof(SampleResponseModel))]
    public ActionResult Save(Order order)
    {
        return Json(new {
            Message = "Success",
            Success = true
        });
    }
}

public class AngularMethodAttribute 
        : TsFunctionAttribute
{
    public AngularMethodAttribute(Type returnType)
    {
        StrongType = returnType;
        CodeGeneratorType = typeof 
         (AngularActionCallGenerator);
    }
}

public class AngularActionCallGenerator 
        : MethodCodeGenerator
{
    // too long - see sample
}

public class AngularControllerGenerator 
        : ClassCodeGenerator
{
    // too long - see sample
}

[TsInterface]
public class SampleResponseModel
{
    public string Message { get; set; }
    public bool Success { get; set; }    
}

}

module MyApp {
	export interface ISampleResponseModel
	{
		Message: string;
		Success: boolean;
	}
if (window['app']) {
    window['app'].factory('Api.AngularController', 
    ['$http', 
        ($http: angular.IHttpService) => new AngularController($http)]);
}

/** Result of AngularControllerGenerator activity */
export class AngularController
{
	constructor ($http: angular.IHttpService)
	{
		this.http = $http;
	}
	public Save(order: IOrder) : angular.IPromise&lt;ISampleResponseModel&gt;
	{
		var params = { 'order': order };
		return this.http.post('/Angular/Save', params)
		    .then((response) => { return response.data; });
	}
}        

}