Add types to your classes

Remember making classes in chapter 4 of the JavaScript course? Take the starting values in the constructor, put them into this.name, use them from the methods. This chapter puts types on that way of writing.

As it happens, write a class exactly as you did in JavaScript and TypeScript gets cross. You get the error "Property name does not exist on type Person". Here is why. To TypeScript, a class is also a blueprint for what data it holds. So it will not allow a this.name to spring up in the middle of the constructor. Declare "this class holds name: string" first, then use it. That is what typing a class means.

Once declared, life gets easier. Type this. and the properties it holds come up as suggestions; mistype one and it goes red on the spot. The parameters and return of a method are written just like an ordinary function.

Next comes private. In JavaScript, "please do not touch this from outside" could only be a convention or a naming habit. TypeScript has a way of writing it down. A property with private on it stops you when you try to read or write it from outside the class. readonly comes along too. Put it on things settled when you make them and never changed after — a student number, a date of birth.

Think of private and readonly as instructions written into the code. A comment saying "do not poke at this directly" sometimes goes unread; write it in the type and it is kept whether it is read or not.

Then inheritance. extends for taking on a parent class gets safer with types too. Override a parent method with the wrong number or type of parameters and it tells you. In JavaScript it would quietly become a different method.

And then implements. You point an interface from chapter 2 at a class and declare "I meet this shape". Write that and forgetting a required method becomes an error on the class. No more "I will implement it later" shipping quietly unimplemented.

At the end of the chapter you pick up a way of writing less. As things stand, giving a class one field means writing the same name three times: declare it, take it in the constructor, put it into this. TypeScript has a shorthand that does it once. Put private or readonly on a constructor parameter and a field of that name is made and assigned for you. Nearly every class you meet in the wild is written this way.

By the end of this chapter you can put types on everything the JavaScript course taught you to write. Variables, arrays, functions, objects and classes. That is the whole round of "writing with types".