The Windward Studio

Windward Blog Home

A Whole Bunch of TypeScript Tips

by
Posted on 05/28/2015

Please Share This

 

TypeScript logoWhen you start with TypeScript, installing and using it is easy. What’s difficult is knowing how to use it well.

Below are the lessons our dev team learned, coming from the worlds of Java & C# to TypeScript. Some of the TypeScript tips came easy for us, but many we learned after first trying several other approaches that did not work well.

When to Use Typescript

Should you even use TypeScript? Yes, unless you’re writing a small amount of code that is working with existing JavaScript libraries. If you’re writing a substantial amount of code there’s no downside to TypeScript. None. After all, JavaScript is legal TypeScript, so it imposes no limits.

And remember, TypeScript is a pre-processor that converts TypeScript into JavaScript. There’s no runtime library (if you want a good Typescript collections library, use this).

Basic TypeScript Tips

  1.  Use “import moduleName = require (“filename”);”, not modules. For small apps you can use either, but once the size gets over 20 or so .ts files, modules become a problem. Imports work great. And note, the moduleName is the namespace for the classes in the required file which avoids any naming conflict.
  2. Don’t do const on enums. In version 1.4 (later versions may be ok) we’ve hit some issues with this.
  3. Use WebStorm – it’s a great editor for TypeScript and auto-compiles the code. Visual Studio is good, but WebStorm is awesome.
  4. Declare the typing for every parameter passed to a function. Use the union (‘|’) as needed to declare all the possible types, but avoid both ‘any’ and no specification. Parameter type declaration is key to making use of TypeScript.
  5. Same for all variables in a class. And the function return type. Declare the type of every single one.
  6. For vars you don’t need to declare if TypeScript can autodetect it. For example “var x = ‘dave’;” types x as a string.
  7. If you declared a parameter as a union of an object and a primitive, like “Point | string”, then you cannot using instanceof on the parameter. But if you’re at a point in the code where you know it is now an object, you can use “if ((<Object><any>myVar) instanceof Point)”.
  8. Use instanceof – it’s fast. There is no need to add some type member in your classes to determine what class an object is. Not compare to a className member. Instanceof is as fast (in our tests) and returns true for superclasses.
  9. It’s fine to stick with the Java/C# practice of each class gets its own file. However, it’s also fine to combine multiple classes in a single file. We combine short classes that are part of the same segment in a single file. For example, you can have Point, Size, and Rectangle all in a single class. Our rule of thumb is the combined classes should be a file that is under 150 lines of code.

Interfaces in TypeScript

Interfaces in TypeScript are not like interfaces in Java/C#. Do not use them to declare additional functionality that is in some superclasses.

For this use case, declare that functionality in the class and have a function to call that will tell you if that functionality is implemented in the class. Declaring the extra member variables in the base class has no hit because they only take up memory if the member variables are instantiated in the object.

What we use interfaces for is to specify the JSON we receive both when reading objects from the server and for objects passed to/from a web worker. In those cases what you receive is an interface in that it has all the declared variables, but no methods. We then declare the matching class as implementing the interface and the constructor is declared to be passed the interface, not the class.

It’s tempting to just assign the __proto__ in the received JSON (ie interface) to turn it into the desired object. Don’t do this – it kills the JavaScript optimizer and your performance will suck (details here).

Getters & Setters

In Java & C# you access all member variables with getters & setters. It’s not worth it in TypeScript (or JavaScript). It felt very weird at first, almost like it was a sin to access member variables directly. But it works better and is cleaner in TypeScript. Any variable that you would expose publically with a get/set in Java/C# just declare as a public variable.

For properties that are not a variable that you would declare with a get/set in Java/C# (for example getRight/getBottom in a Rectangle class that has x, y, width, height as its actual variables) use the JavaScript get/set calls. This will give you a right & bottom property, that is actually a function.

Note that in this case when you JSONify the object, these properties are not in the JSON as they are functions. This is a good thing as you don’t want computed values in the JSON.

One Final TypeScript Tip

If you’re going from JavaScript to TypeScript, the main thing to keep in mind is that the typing is there to help you – embrace it. Don’t try to minimize it and ignore it in places. If you do, you lose a lot of the value.

If you’re going from Java or C# to TypeScript, keep in mind this is not a different language to do things the same way. JavaScript is very different and while TypeScript can make it look more familiar, you need to learn to write correctly for JavaScript/TypeScript. And that’s very, very different in many ways.

Was this helpful? Let me know in the comments below.

Please Share This



Author: David Thielen

Dave, Windward's founder and CEO, is passionate about building superb software teams from scratch and dramatically improving the productivity of existing software teams. He's really proud that he once created a game so compelling (Enemy Nations) that a now-professional World of Warcraft player lost his job for playing it incessantly on company time. You can read more from Dave on his personal blog, and at Huffington Post.

Other posts by