Type a class you inherited

01 / 05

The way you write extends has not changed

You inherit a parent class with the same class child extends parent as in JavaScript. You do not have to write the parent's fields again in the child.

The types come with them, so the name you read off a child instance is treated as a string.

class Animal {  name: string;  constructor(name: string) {    this.name = name;  }}class Dog extends Animal {}const dog = new Dog("Pochi");console.log(dog.name);

Result

Pochi

02 / 05

What the child adds, the child declares

A field only the child has is declared inside the child class. And once you write a constructor on the child, call super(...) before anything else. It is the signal to leave the parent's share of the setting up to the parent.

Forget it and you are told "A 'super' call must be the first statement in the constructor."

class Animal {  name: string;  constructor(name: string) {    this.name = name;  }}class Dog extends Animal {  color: string;  constructor(name: string, color: string) {    super(name);    this.color = color;  }}const dog = new Dog("Pochi", "brown");console.log(dog.color);

Result

brown

03 / 05

Override a parent method

Write a method on the child with the same name as one on the parent and the child's is the one used. That was overriding.

With the types written, you avoid the accident where what you thought was an override turned out to be a completely different method. The shapes of the parameters and the return get checked for you.

class Animal {  speak(): string {    return "some sound";  }}class Cat extends Animal {  speak(): string {    return "meow";  }}console.log(new Animal().speak());console.log(new Cat().speak());

Result

some sound
meow

04 / 05

A shape that is off gets stopped

Say the parent's speak returns a string but you wrote the child's to return a number. In JavaScript it would run quietly and you would find out later that a value you thought was text is a number.

The error comes in three lines. The further down, the finer the detail, so read from the bottom. "Type 'number' is not assignable to type 'string'" — the same complaint you saw in chapter 1.

class Animal {  speak(): string {    return "some sound";  }}class Dog extends Animal {  speak(): number {    return 1;  }}

Result

Type error: Property 'speak' in type 'Dog' is not assignable to the same property in base type 'Animal'.
  Type '() => number' is not assignable to type '() => string'.
    Type 'number' is not assignable to type 'string'.

05 / 05

Add to what the parent does

Write super.methodName() inside a method you overrode and you can call the parent's version. Use it when you only want to add to what the parent does.

The return type is inherited too, so the result of super.speak() can be used as a string straight away. Right, have a go.

class Animal {  speak(): string {    return "some sound";  }}class Dog extends Animal {  speak(): string {    return super.speak() + " and woof";  }}console.log(new Dog().speak());

Result

some sound and woof