MMA with Ionic 3 - Tutorial Part 10 Inheritance in Typescript

See Image Larger
MMA for Make Mobile Applications
In previous lessons, we learned a few principles about Object Oriented Programming in Typescript. Now, we will create new class named Cryptocurrency and we will create new object from Cryptocurrency class.

class Cryptocurrency {
    name: string;
    founder: string;
    releaseYear: number;
    sellingOnBittrex: boolean;

    constructor(name: string, year: number, founder: string, bittrex: boolean) {
        this.name = name;
        this.releaseYear = year;
        this.founder = founder;
        this.sellingOnBittrex = bittrex
    }

    printFounderName() {
        console.log(this.founder);
    }
}

let steem = new Cryptocurrency("Steem", 2016, "Dan Larimer", true);
steem.printFounderName();

Okay, we created our class, properties and a method for that class and create steem object. We created this class for look another concept named inheritance.

Let say I have my Cryptocurrency class and I want to create a specific class named Steemit. So I create Steem class.

class Steem {

}

And I want to use this Cryptocurrency class. I want printFounderName method and I want to use properties that in Cryptocurrency class(except name property because we use the name on creating "Steem" class.)

Now, rewriting whole class may be torture and our code will be less reusable. Instead duplicate whole code in Cryptocurrency class, we extend new class with extends keyword.

class Steem extends Cryptocurrency {

}

This code block takes Cryptocurrency class use all the code inside of it. But our class name is a Cryptocurrency name already. So if I add a new line like this;

class Steem extends Cryptocurrency {
    name: "Steem";
}

this property will overwrite. If I want to create new object from Steem class, I get an error.

See Image Larger

Because Steem class use the constructor of Cryptocurrency class. And our code wants parameters from us. Then again we don't want to declare name property. What will I do?

I could add a constructor to Steem class. And I could do this to make sure that I don't have to declare name again.

Despite the correct constructor declaration, I get an error. The reason is when extending a class you always have to call super function which calls the constructor of your parent class. Super referred parent class by the way. Then do that and write the whole code.

class Cryptocurrency {
    name: string;
    founder: string;
    releaseYear: number;
    sellingOnBittrex: boolean;

    constructor(name: string, year: number, founder: string, bittrex: boolean) {
        this.name = name;
        this.releaseYear = year;
        this.founder = founder;
        this.sellingOnBittrex = bittrex
    }

    printFounderName() {
        console.log(this.founder);
    }
}

class Steem extends Cryptocurrency {
    // name: "Steem"; // we don't need this anymore
    constructor(year: number, founder: string, bittrex: boolean) {
        super("Steem", year, founder, bittrex);
    }
}

Previous Chapter: Constructors in Typescript