Typescript Classes 10 exercises
explainer

Overriding Methods in TypeScript

When you work with classes in TypeScript, sometimes you need to override methods.

In this example, we have a BaseClass with a simple method. This method logs "BaseClass method" to the console.

We also have a SubClass that extends BaseClass. SubClass also has a method, which logs "SubC

Loading explainer

Transcript

00:00 When you're working with extending classes, you sometimes need to override methods on that class. And here we've got an example. We have a class of base class, which just has a method on it, which when you call it says console log base class method. In other words, just instantiating this class, the base class, when you console log it,

00:18 it would say base class on it, but we extend the base class in our subclass and then we declare method again. And we say console log subclass method. So we have instance down here. And when we say instance dot method, it will actually call the subclass version because we're overriding it.

00:37 Now I've got a special setup here where I have a tsconfig.json file with a special little option. And this option is no implicit override. And this is kind of the topic of what I want to talk about now, because if you think about it, this setup isn't really that, um, it's quite brittle, really.

00:56 If we change the name of the method in our base class, let's say we actually give it a proper name. So we say, uh, log name, for instance, then this one, this method actually isn't overriding the thing in the base class. And we can just still call the like method that's in the base class,

01:14 even though we don't want it to be, we actually want it to be overridden. So we sort of want to explicitly say that this, um, method here should always be up to date with the thing that it's overriding. So we can do that by saying override. So we give it a specific keyword of override method.

01:33 And now it's actually giving us a warning because this member cannot have an override modifier because it is not declared in the base class base class. So what it's saying there is you can't override something that doesn't exist in the base class. If we put this back to method here, then it'll start working. And of course, we still need to update this thing here.

01:53 So what override says is it basically says, okay, this must be, must be an overrided method from the base class. Otherwise you might end up with a situation where they fall out of sync with each other. And there's a TS config option to make sure you do this. Because of course, normally you can actually just get away with not doing this and this error won't

02:13 show. But because we have a TS config dot JSON with no implicit override here, then it actually gives me an error in this situation. This member must have an override modifier because it overrides a member in the base class base class. So give it an override and you're good to go. You can also attach a private and public modifiers to this.

02:31 I think this one would need to be private or possibly protected. Would this work? Yeah, this would work here. And so this is the order protected override method, but this extra little syntax here just gives you a bit more stability. And this is why actually I recommend in every TS config dot JSON that

02:49 you have, you have no implicit override turned on because you know what? You might use a little bit of classes. And if you do, and if you do this extends thing, you basically just get a bit of extra type safety for no additional cost. So that is the override keyword in TypeScript.