Typescript Classes 10 exercises

Extending Classes in TypeScript

Here we have a more complex version of the CanvasNode class.

In addition to the x and y properties, the class now has a viewMode property that is typed as ViewMode which can be set to hidden, visible, or selected:

type ViewMode = "hidden" | "visible" | "selected";

Loading exercise


00:00 Let's imagine that our CanvasNode class has kind of gotten out of hand, and it's gotten a little bit too complex. Now, let's imagine our CanvasNode here, it has its x and y, and the x and y is defined inside the constructor, it's inside the initial options that you pass in.

00:17 Then it's also got this position, which is to do with x and y, and it's got this move function, which is to do with x and y too. But it's now got all of this other logic inside it, which it has a type of view mode, which is hidden or visible or selected.

00:31 Then we assign view mode inside the constructor to the CanvasNode, and this basically represents whether the element is hidden, visible, or selected. And this is a little bit awkward, because let's say that we actually have some things in our application which are just shapes, right?

00:48 Not a CanvasNode, but a shape. And the shape is just basically the x and y, the ability to move things around, and some things go on the canvas, but some things don't. Your job is to basically take all of the functionality to do with the x and y, and move it into another class.

01:05 We still want all of these tests to work down here, we've got a bunch of different tests, and they should still just work as usual, and they shouldn't actually be changed at all. But we want to take all of the x and y stuff, put it in another class, and have CanvasNode inherit from that class.

01:22 That's our job here, to compose this class into two separate classes. This one remains CanvasNode, and the other one is just going to be called Shape. Good luck.