Sync C# classes with TypeScript using TypeLite and the pain of building and packaging

UPDATE: a much better way to approach this is to use swagger, and generate your client code using autorest or swagger codegen you wont be able to use this with WCF, but we moved our WCF services to WebAPI and it worked fine.

A common requirement we have is using the same objects between TypeScript and C#, writing the UI in TypeScript and the business logic and data access in C# in a Web API or WCF.

What I’ve got for this is not a perfect solution by far, we work on a team so need to share the code around, so build time is important, I’m hoping to do some followup posts about how i solved these issues, when i solve them.

We use TypeLite for this (http://type.litesolutions.net/), you can install it via nuget package manager into your C# class library, once in there all you need to do is add the “TsClass” attributes to the classes that you share.

Make sure they are properties and not fields though, fields won’t output into the TypeScript generated code.


[TsClass]
public class MyObject
{
public int ObjectId { get; set; }
public string ObjectName { get; set; }
}

Now the imperfect part of this is in the build, TypeLite uses a tt script to execute, its is possible to run these via msbuild (TeamCity/Teambuild) but they are missing some libraries, so if you do actually get it to run (as i spent half a weekend doing) it’ll blow up on you.

I’m still working on a way to solve this, for now there is one manual step i tell my guys to do before check in, which is right click on the TypeLite script and hit run custom tool

TypeLiteManualStepBeforeCheckIn

this will regenerate the “ts” file which will be checked in with the project.

Now for the build time pain.

I create a TypeScript Sub-folder in the project and throw in a nuspec file, example code below


<?xml version="1.0" encoding="utf-8" ?>
<package xmlns="http://schemas.microsoft.com/packaging/2011/08/nuspec.xsd">

<metadata>
<id>Types.TypeScript</id>
<version>0.0.0</version>
<title>Types.TypeScript deployment package</title>
<authors> Pty Ltd</authors>
<owners> Pty Ltd</owners>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<description>Types.TypeScript deployment package</description>
<summary>Types.TypeScript deployment package</summary>
<releaseNotes />

<language>en-US</language>
</metadata>
<files>
<file src="*.ts" target="content\Types\$version$" />
</files>
</package>

This then gives me a a nuget package that i push up to our nuget server that we can install into the UI project via nuget package manager. I also package the C# library so end up with two outputs from the one project that can be used in C# or TypeScript.

LiteLiteInstallNuget

Currently i put the version number in the path because i was having issues with Visual Studio Version control causing a delete and add on the same file when installing the nuget contents, preventing a check-in on updating the nuget package as the file locks when it is flagged for deletion in source control.

i’m yet to try this with VS2015 or with Git to see if it fixes it. Having the version number in the path means I have to update the path in the project each time so it’s by no means perfect, but it works and we can share it around the team.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s