Typescript Classes 10 exercises

Creating a Class with Default Properties

Classes in TypeScript are like a special object that allows for some special syntax. Every time you declare a class, you can instantiate a new instance of it using the new keyword.

To create a CanvasNode class with with x and y properties, we can fill in the class body with the following:

Loading solution


00:00 Okay, let's look at classes in TypeScript. So, a class is kind of like a special object where it behaves pretty much exactly like an object, but you get to use some special syntax. And every time you declare it or instantiate a new class, then it basically kind of, you use this new CanvasNode syntax,

00:18 or we can call this whatever we want. I'm calling this CanvasNode because this is gonna sort of carry on through the next few exercises. And our CanvasNode has to have an X and a Y property. So, just like we did with our object syntax, we can say X is a number and Y is a number. Okay, now we're getting somewhere,

00:38 but we get an error inside here by saying property X has no initializer and is not definitely assigned in the constructor. Well, what's the constructor? When we call this kind of like function here, new CanvasNode, we're like calling it, passing it zero arguments, we can actually kind of like add that behavior

00:58 into our CanvasNode by adding a constructor function. And that constructor is gonna be a function like this. And what this does is it says this.X equals zero. And when I add this line of code, then the error up here goes away. So, what was the error? Is not definitely assigned in the constructor.

01:17 This is the constructor function. And when I assign to this.Y, well, the error goes away. And now our tests are gonna start passing too because we have CanvasNodeX to equal Y, we're expecting to equal zero, we're expecting that to be true. And we're also expecting Y to equal zero too.

01:37 But we're also expecting these properties to be read only, right? Well, we can fix that. We can say read only X and read only Y. Very, very cool. Now what this means now is that we can no longer like assign to it from the outside. So we can no longer kind of assign to it.

01:56 Beautiful stuff. And it means we can use this kind of like syntax, this read only syntax inside our class properties. There is though a different style of solution for this where you can actually combine the kind of like type annotation at the top here and the assignment below it.

02:14 And this looks like this. Well, what you say is class CanvasNode and you say read only X number equals zero. This is really, really cool. It means that you can kind of like combine the two and you don't need to declare a constructor in this case. And so this is a really nice kind of added syntax

02:34 that we get with classes. You notice again, classes are just like objects, but just a little bit more powerful, a little bit more interesting in various directions. And we're gonna keep on covering them over the next few exercises.