When 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
Basic TypeScript Tips
- 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.
- Don’t do const on enums. In version 1.4 (later versions may be ok) we’ve hit some issues with this.
- Use WebStorm – it’s a great editor for TypeScript and auto-compiles the code. Visual Studio is good, but WebStorm is awesome.
- 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.
- Same for all variables in a class. And the function return type. Declare the type of every single one.
- For vars you don’t need to declare if TypeScript can autodetect it. For example “var x = ‘dave’;” types x as a string.
- 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)”.
- 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.
- 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.
Getters & Setters
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
Was this helpful? Let me know in the comments below.
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 David Thielen