Typewriter (C# to TypeScript)

Typewriter is a free extension for Visual Studio that generates TypeScript files from C# code files using TypeScript Templates.

https://frhagn.github.io/Typewriter/index.html

To make it available in your Visual Studio, go to Extensions and Updates menu and search for Typewriter. When Typewriter is installed it also adds a new file type to Visual Studio, TypeScript Template (*.tst) that is available in the “Add new item”-dialog under the category “Web”.

How to make it work

Typewriter requires a template file (*.tst) and will generate Typescript files based on it.

For example, let’s add a new template that will handle the generation rules for C# model classes inside the same project. The rest of the .ts files visible the same folder with the template are automatically generated.

The templates will track any changes to C# code and when it finds a class matching the filter (*Model) it will automatically add, update or delete a corresponding TypeScript file. Each time the template is modified, the generated files are updated.

Inside a template

${
    Template(Settings settings)
    {
        settings.IncludeCurrentProject();
        settings.OutputExtension = ".ts";
    }
}
$Classes(*Model)[
export interface $Name {$Properties[
    $Name: $Type;]
}]

The first part of the file (between ${}) is C# syntax. The code model can be extended by adding custom methods to the template (we will see that in a future post).

The second part represents the code that will be added in each file generated. Everything from here will be added to all files.

All templates must have at least one filter. In the example above the filter is between the keyword and the template. (*Model) –  matches classes ending in “Model”

Everything between [ and ] will be repeated for each item in the collection. Example:

To check that the above template works, let’s create a new C# class named “UserModel” with some properties. Example:

    
public class UserModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
}

The corresponding Typescript file fill be generated and the content will be like this:

export interface UserModel {
    Id: number;
    Name: string;
    Email: string;
}

Next screenshot shows the folder structure for this small example, where UserModel.ts file is being generated (second file highlighted).

The same rules are applied for generating ready to use Angular services from C# Controllers (no need for manually creating the service and its methods). The template is more complex, but if this small example is clear then you should have no problem understanding the services template.

If you want more technical details, the “Getting started” guide is short and easy to understand – https://frhagn.github.io/Typewriter/pages/getting-started.html