Getting started writing TypeScript couldn’t be easier, in fact you can even use the exact code you are writing today without any changes.
Whilst this is really flexible, it doesn’t make for easy to read or easy to maintain code. Unless your variable names are really descriptive then it generally isn’t clear to someone just glancing at the code what a variable can contain.
What is the type returned from the below function?
Your answer may be that you have no idea because you don’t know what type of variables are being passed in and you would be exactly right. The type of the return depends on the params being passed in. If we passed
var1 as a string then the return value would also be a string. If we passed
var1 as a number then the return value would be a number. If only there was some way we could be explicit about this and display errors before code compilation if we are passing in an invalid type.
Simply install typescript as one of the dependencies of your project:
Once TypeScript is installed compiling your code is simple and easy. We need to perform two steps
In the root of your project create a file called
tsconfig.json and insert the following information
In your terminal run the following command:
You can also run the command in watch mode to watch for changed files and recompile automatically:
TypeScript with simple typing
You may notice that all the differences between the two code samples are contained on line 3.
The complier now knows that
path is of type
params is an array of things, and that the function returns a
string. We would now get errors if we tried to call
const value: number = generateUrl(1, 'test'); as none of the types are correct. We now get immediate feedback that we are using the function correctly and we don’t have to do lots of debugging to find out how to use it.
However, we still don’t know what properties
params contains due to the use of the
any type. There are valid uses of the
any type as you may not be able to properly type a variable (e.g. it is polymorphic, or comes from some outside source in different formats). Where possible we should always strongly type our code though, in the above example we can use an interface to describe what properties
params contains and also what types those propeties are.
TypeScript with complex typing
You can now see that the inclusion of the
Param interface has given use information not just about the things we were already accessing (
value) but about the types of things we didn’t even know existed (
include). Now when another developer comes to this file and wants to make a change to our
forEach they know exactly what properties are available on
Assuming you IDE supports TypeScript, you should now be able to see what properties
params contains and also what type those properties are.
Defining your own typings
You may have your own custom objects or functions you may want to use within TypeScript. In order to do this you need to provide your own set of typings for them. Say you had the following code using a custom global:
By default TypeScript doesn’t know anything about this global so won’t even compile, but we have a nice easy way to tell TypeScript that this global exist and here is what properties it contains. Simply create a file in your project root called
typings.d.ts and then populate it with the following content:
Typescript will now pick up this file and include the typings in the compilation process.
Using packages with TypeScript
As with defining you own typings, TypeScript now expects to know information about packages such as what functions are available and the values they return. Luckily there is a really simple way to get typings for most popular packages.
All typing packages are now hosted on npmjs and you can install them the same way you would install any other npm package.
TypeScript will then pick up these files out of the
node_modules folder automatically and take them in to account when compiling the code.
This does mean however that if your favorite package gets updated with new functions that you want to use that you need to update your @types package too.
We have now covered the basics of TypeScript. Get out there and start writing your code.