TypeScript codegeneration with Typewriter

with 2 Comments

For several projects now I’ve been working with TypeScript as my primary front end development language.

In a few words TypeScript is a typed superset of JavaScript that can compile nicely typed code to javascript. When your front end applications get bigger and bigger with more and more functionality, type-safety is a great win. This is true for me in my own small projects, but even more true when your team of developers increase in numbers.

Getting your application properly typed might be a bit of a hazzle, you need to define your api-endpoints, what arguments do they accept, of what type? what do they return? what are the different  states in that Enum that is used in my model? And once you’ve declared these interfaces you must keep them insync with your backend code as your application expands. That sucks.

About a year ago we started working with T4-codegeneration to get out of this manual work. This worked OK but was hard to customize to different needs in different applications.

6 months ago a collegue released TypeWriter, an extension to Visual Studio that works with the Code Dom to generate its content. Lets dive into some examples!

When TypeWriter is installed you can add a new TypeScript Template-item:

2015-05-05 15_39_48-TypewriterBlogPost - Microsoft Visual Studio (Administrator)

You will be presented with a default template like this:

 

TypeWriter applies its template to all relevant files. Lets say we have a file UserModel.cs:

Replace this your template with this:

A brief explanation of the code:

$Classes(FantasticApplication.Models*) [ ... ] will iterate over all classes in UserModel.cs whos fullname starts with FantasticApplication.Models and output whats specified within the brackets.

$Name is the name of the current context, might be a class-name, method-name or a property-name.

$name is the same but with camelCase.

$Properties is a collection of properties, output per property is specified within the brackets.

$Type prints the type name.

 

When your UserModel.cs is saved TypeWriter will re-evaluate the template and generate a nested file containing the output:

2015-05-05 16_00_48-Action center

Awesome! This means we have front-end code reflecting the models on out backend so that we can have a nice, typed, front end development experience for our models.

But how about controllers, you might ask?

Given that you have a Controller, say UserController.cs like this:

Add a new TypeScript-template item, Controllers.tst and specify its content like this:

Aaaand voila:

 

Thats it! Both your Models and your Controllers (returning your models) are now typed in your front-end code, yay!

This means intellisense when typing your application (like below) but above all: compile-time errors if types have changed on your backend!

This has surely increased out performance and quality when coding large javascript applications, hope it can help you aswell!

2 Responses

  1. […] So this is fantastic, right? we have a tool for calling our backend that will give us typed parameters and results. But how about those parameters and results, who does the manual typing, making sure all parameters and all the result’s properties are accounted for? The solution is called TypeWriter and here is an earlier post about that: TypeScript codegeneration with Typewriter. […]

  2. […] written previously about angulars $http/$resource and about typescript codegeneration, now its time to write a few words about my current project and how we used TypeWriterand $http to […]

Leave a Reply