The first feature it includes is Static Type Checking. What this means is that you can specify the Type of information you expect in your functions, e.g. a string. If you were to add a number, and TypeScript was expecting a String, it would throw you an error. TypeScript also gives us Classes to work with. This isn’t as big a deal now what with ES6 having them built in, but before ES6, it was a big deal.
Defining Data Types in variables
Defining Data Types in functions
The next useful feature of TypeScript are it’s use with functions. The below code demonstrates how you can define the type of data you want a function parameter to be, and also the type of data you want it to return. Note in the below code the use of the question mark which means that the parameter is optional. Although, it’s not strictly TypeScript the function, it’s also good practice to cover different types of data used in the parameters. In the example, we test for the typeOf data and then act accordingly.
In the same way we can write let myString: string; we can also use something called an interface, which is essentially the allowed data types of the key values. The below example should help clarify things, whereby you are specifying the showTodo function that the parameter must be an object with a title and text key that should both be strings.
These are a feature that are now baked into ES6 and so if you’ve used ES6 classes… well then these are nothing new! The code below starts by defining an interface, which sets out the keys and methods that the class must have. We then create a new class called User which implements the userInterface we have just specified. The User class, starts by defining all the keys that the class can take. Notice the public, private and protected specifications which will change the closure of the keys in children classes.
The constructor function is baked into classes and is run when a new User class is created. It sets the keys to the parameters that are handed to it. We can then use this class by creating a new user called Tom with all the relevant data.
We then want to add member functionality to our software, whereby users can become members. To do this, we can use a feature of classes called extends which means that the Member class will inherit all of the methods and keys of the parent User class but allow us to add new methods and keys on top. We add a new key called ID, because in our imaginary system, Members need an ID but Users don’t. You will notice in the Member class, we can use the super function, another feature of classes, which means it will use the parent class keys (name, email, age). The Member class also needs a payInvoice function and so we can use the parents method by calling it with super.
Although the above is a slight divergence into classes rather than TypeScript, it is helpful to see how classes and TypeScript can work together to define the types of data that your code requires.
Again, this is useful for the maintainability of good software as it flags errors clearly as you build your code.