Pavel Novikov edited this page Aug 1, 2018 · 21 revisions

Here is quickstart documentation cheatsheet for Reinforced.Typings (a.k.a. RT). Here you will find out information about how to set up RT, how to generate your first typings and how to extend RT.

Installation and overview

To use Reinforced.Typings in your ASP.NET MVC project you need to install it from NuGet. Use UI or run from Package Manager Console:

PM> Install-Package Reinforced.Typings

It will install following components:

  • RT .dll library to be used in project. It contains configuration classes, attributes and other stuff
  • RT command-line utility that will be called every project's build and generate TypeScript typings for your project's assembly
  • MSBuild script parts (.targets file and .dll containing MSBuild task for calling RT CLI)
  • RT configuration file (Reinforced.Typings.settings.xml) that is being added to your project root.

RT has 3 configuration points:

  • Reinforced.Typings.settings.xml file contains common generation properties. This file is well-documented. Feel free to read configuration parameters description right inside this file. Please do not delete or move this file out of project root. Actually Reinforced.Typings.settings.xml is MSBuild script part being executed each build. It is referenced inside Reinforced.Typings.targets file that is referenced and contains necessary properties to successfully run code generation.
  • Attribute configuration - consists of attributes that you must arrange around your code to achieve specific code generation results. See more details about attribute configuration in corresponding part of this article
  • Fluent configuration - an alternate way to configure code generation results. It can be used along with attribute configuration. See more details in corresponding part of this article

Quick start

Simpliest way to start working with RT is using attribute configuration. Let's try to export sample class as TS interface. Let's assume that we have ASP.NET MVC project with TypeScript feature enabled and /Scripts folder located in root of project.

  1. Navigate to your class

    public class OrderViewModel
    {
        public string ItemName { get; set; }
        public int Quantity { get; set; }
        public decimal Subtotal { get; set; }
        public bool IsPaid { get; set; }
        public string ClientName { get; set; }
        public string Address { get; set; }
    }
  2. Add using for Reinforced.Typings.Attributes namespace and place [TsInterface] attribute above your class

    using Reinforced.Typings.Attributes; // !
    
    [TsInterface] // !
    public class OrderViewModel
    {
        // fold
    }
  3. Rebuild your project

  4. According to default value of RtTargetFile parameter specified in Reinforced.Typings.settings.xml, generated code is now dropped to $(ProjectDir)Scripts\project.ts. So if you are using VS2015 or above - you have to add this file to your solution. To do that navigate to your project's /Scripts folder in Project Inspector. Then Right click - "Add Existing item..." - Locate project.ts - Press "Add". Or locate generated file in Windows explorer then drag generated file into VisualStudio's Project Explorer then drop it inside /Scripts folder.

  5. Feel free to reference generated .ts file in your other TypeScripts. Contents of generated file are:

    module _your_namespace_ {
        export interface IOrderViewModel {	
            ItemName: string;		
            Quantity: number;		
            Subtotal: number;		
            IsPaid: boolean;		
            ClientName: string;		
            Address: string;		
        }
    
    }

Whoa, I've got error in my TS code, it doesnt build, I cannot generate fresh typings!!!

Calm down, Reinforced.Typings handles this problem. Just go to Reinforced.Typings.settings.xml and set RtBypassTypeScriptCompilation to true. This will disable TypeScript build when you rebuild your project C# code (dirty MSBuild hack is used here). Then you can fix your typings export code to produce valid typings. This is kind of killer-feature of Reinforced.Typings.

Important! Do not forget to set RtBypassTypeScriptCompilation back to false to restore TypeScript compilation during project build.

Attribute configuration

Besides [TsInterface] attribute there are others. Avaiable attributes are presented at Configuration attributes page

Fluent configuration

There are some cases when attribute configuration is not applicable. E.g. when you trying to export typings for types belonging to another assembly which source code you do not have. In this case fluent configuration may be usable. Let's rewrite example above using fluent configuration:

  1. Create static class containing static method that consumes instance of Reinforced.Typings.Fluent.ConfigurationBuilder somewhere as follows

    using Reinforced.Typings.Fluent;
    
    namespace YourProjectNamespace {
        public static class ReinforcedTypingsConfiguration
        {
            public static void Configure(ConfigurationBuilder builder)
            {
                builder
                    .ExportAsInterface<OrderViewModel>()
                    .WithPublicProperties();
            }
        }    
    }
  2. Go to Reinforced.Typings.settings.xml and set there RtConfigurationMethod parameter to full-qualified name of Configure method as follows:

    ...
        <RtConfigurationMethod>YourProjectNamespace.ReinforcedTypingsConfiguration.Configure</RtConfigurationMethod>
    ...
  3. Rebuild your project and check project.ts file

You can find out more info about fluent configuration on this page.

Extracting C# XMLDOC to TypeScript JSDOC

Check out how to embed JSDOC to your TypeScript files here.

Separating code among several files

Reinforced.Typings has amazing abilities for spreading your generated TypeScript code among several files. Please discover them by referring to corresponding documentation section.

Types resolution features

Check out how Reinforced.Typings resolves types and how can you handle it.

Writing custom code generators

Due to technical reasons, documentation for code generators is located within sample code. If you want to know how to automatically generate AngularJS middleware from your C# classes with Reinforced.Typings then please check out sample (.zip download), open with VisualStudio and run. Index page will show detailed instructions both for AngularJS and jQuery.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.