Adding Types with Typescript

Posted in Tutorials

In this tutorial, we add types to a regular function “computeTip”. Javascript does not yet have types, so we use Typescript which adds types to Javascript. We create a new typescript file called app.ts …

We specify that computeTip is adheres to the “Function” interface. That the input “amount” is a “number” type. And that the function returns a “number”.

To run, you have to have Node.js and the typescript compiler tsc installed as described in previous tutorial. Then you can do …

If you are using a typescript knowledgable editor such as Visual Studio Code, it will warn you when you are using the wrong types…

Instead you have to explicitly convert to string and specify string as the return type …

Array of types

To specify the types of an array elements, you have two ways of doing it …

The second way is using generics.

You can have types of your own class such as …

Interface

Here we have defined an interface “Person” in Typescript…

The greeter function requires an parameter “user” that matches this interface. We create object “john” that matches that interface and pass it to the greeter function.

If the Person interface can have an optional property such as age, you can define it as such with a question mark…

The only problem with the Person interface now is that if we pass in an object with extra properties like “gender”, it would not fit the interface Person. If we allowed Person to have any other attributes after the ones that are specified, then you can do …

If you want the properties to be readonly precede it with the keyword “readonly” like this …

Now the function can not change the firstName as indicated by my editor warning of red squiggly line.

Instead of defining a named interface, you can specify the “shape” of the parameter “user” on-the-spot like this…

A class can implement an interface like this …

Typescript enum

Here we define an enum called “Month” and specified that “birthMonth” is of that type…

Note that when you output the enum, an integer 7 comes out. If it doesn’t make sense that August is 7, then you can assign your own integers like this …