Typewriter

Automatic TypeScript Template generation for Visual Studio

About

Typewriter extends the functionality of Visual Studio.

What is it?

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

This allows you to create fully typed TypeScript representations of server side API, models, controllers, SignalR hubs etc. that automatically updates when you make changes to your c# code.

By doing this you get TypeScript Intellisense and compile-time errors when the client- and server side code differs. This speeds up your development pace and increases the quality of your applications.

How does it work?

Typewriter works by adding support for TypeScript Template files (.tst) in Visual Studio.

A TypeScript Template is a TypeScript file with some extra features for extracting meta data about your c# source code such as classes, interfaces, properties and methods. The meta data in combination with the template files are then used to create TypeScript files that are kept in sync with the c# source files.

So if you add, remove or modify your c# code, the changes will be reflected in the generated TypeScript files automatically.

Features

Increase the development speed and quality of your applications.

Fully Automatic

Typewriter always keeps your gererated code up to date without any interaction. As soon as a change is detected all templates are automatically re-rendered.

IntelliSense

The template editor provides context-aware statement completion as you type, auto-completing to increase speed and accuracy. Quick Info tool tips let you inspect the metadata definitions.

Extensible

Create custom extensions to your templates using c#. This enables you to generate rich content without breaking a sweat.

Compile-time errors

Leverage TypeScript's type support to get compile-time errors and warnings when your client-side and server-side code is out of sync.

Flexible

Create custom templates that fits the technology in your project. Typewriter doesn't care whether you're using Angular, Aurelia, jQuery, Knockout, React, Vue, SignalR or whatevers-next.js.

Free and Open Source

Typewriter is available for free from the Visual Studio Gallery and under the Extensions and Updates menu in Visual Studio. The source code is available on GitHub.

Screenshots

Add item

IntelliSense

Quick Info

Generated TypeScript output

Example

Below is an example of a TypeScript Template for generating simple model classes.

$Classes(*Model) will find public classes with a name ending in "Model" defined in the same project as the template or in a project referenced by that project.

The section between the brackets ([]) is repeated for each class. $Name will print the name of the class and $Properties will loop each public property of the class. $name is the name of the property (by using the lower case $name the property name will be printed in camel case) and $Type is a TypeScript friendly version of the property type.

module App { $Classes(*Model)[
    export class $Name { $Properties[
        public $name: $Type;]
    }]
}
using System;
using System.Collections.Generic;

namespace Demo 
{
    public class CustomerModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public ICollection<OrderModel> Orders { get; set; }
    }
}
module App { 
    export class CustomerModel {
        public id: number;
        public name: string;
        public orders: OrderModel[];
    }
}