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

2 Comments

  1. Aurélien JOLY said:

    Ok as I struggled to find out this basic stuff that can break your template, here are some more information on how to use TypeWriter
    https://www.bountysource.com/issues/56372119-potential-bug-in-c-comment-parser-on-single-quotes

    You should explain how the scope works for the methods and the automatic injection of items in them(Class, File, Properties…) It tooks some time for me to grasp these concepts that are not detailed or illustrated in the official documentation

    November 7, 2019
    Reply
    • selfclosingbug said:

      Hi Aurélien,
      I will take in consideration both your comments in my next Typewriter tutorials and I will edit this post when I have some time available.
      Thank you for your suggestion

      January 24, 2020
      Reply

Leave a Reply to selfclosingbug Cancel reply

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