Name: Sharing Class Behavior with Inheritance in TypeScript
Uploaded: 2016-08-22T19:40:53-05:00
Description: Typescript classes make inheritance much easier to write and understand. In this lesson we look into how to set up inheritance with Typescript classes, extends and super.

Introduction to Static Typing

Using Type Inference in TypeScript

Union Types and Type Aliases in TypeScript

Distinguishing between types of Strings in TypeScript

Using Interfaces to Describe Types in TypeScript

Creating a Class in TypeScript 

Sharing Class Behavior with Inheritance in TypeScript 

Using Assertion to Convert Types in TypeScript

The Basics of Generics in TypeScript

Practical Generics in TypeScript

Use Types Effectively in TypeScript

Typescript classes make inheritance much easier to write and understand. In this lesson we look into how to set up inheritance with Typescript classes, extends and super.


https://app.egghead.io/api/v1/lessons/typescript-sharing-class-behavior-with-inheritance-in-typescript/subtitles

[00:00] We have a comic book character class that has public properties and one private property. We're using the Typescript shorthand for declaring and setting those properties upon initialization. Now, we need a superhero and a supervillain.

[00:13] They both have comic book character properties. We can use the extends keyword to inherit the comic book character class properties instead of having to rewrite the properties in the superhero and supervillain classes.

[00:26] Now, we need an instance of our superhero and supervillain. Let's console log the instances to see if this worked. Let's compile and run the code. We have a supervillain and a superhero. They both inherited the properties from the comic book character class.

[00:45] Let's add some specific properties to our superhero and supervillain classes. Let's see if this worked. Now our superhero and supervillain classes are inheriting properties from the comic book character class, but they each have their own specific property as well.

[01:01] Unfortunately, we can't access the inherited private property in the classes derived from the comic book character class because you can't access private modifiers outside of their containing class.

[01:13] We could move the method to the comic book character class. If we compile and run the code, this works. Maybe, we only want to get the secret identity for superheroes. We can use the protected access modifier instead of private.

[01:30] Protected is similar to private because it can't be accessed outside of a class, but it can be accessed in a derived class. Let's see if this works. Nice.

[01:41] Now, let's add some functionality to a derived class when it's instantiated. The IDE has given us some indication that something is wrong. If we hover over the constructor, we can see that it's expecting super to be called.

[01:53] When you extend the class without defining the constructor, the derived class will use the base class as constructor.

[01:59] Now that we're defining the constructor for the supervillain class, we have to call super. The IDE is telling us that super expected four arguments. OK, let's put in four arguments. Now, the IDE is complaining about the super arguments, but the message isn't that clear.

[02:16] Let's see what the compiler says. Super call must be the first statement in the constructor. That's easy enough to fix.

[02:22] Now let's see what it says. Can't find any of the super arguments. What does this error mean? We haven't created any of these variables we're passing as super, so let's pass them in the constructor. Let's see if that worked. Nice.

[02:34] Super expects four arguments because super is a reference to the base class. The base class is constructor, expects four arguments.

[02:43] We are passing the arguments into the derived class's constructor so the values can be set upon instantiation and super can extend the base classes properties. Notice how the derived class is constructor, and super arguments don't have to be the same as the base class.

[02:57] Yet, the supervillain class is still inheriting the same access modifiers from the comic book character class. Scarlet Witch's secret identity is still protected because I can't access it outside of a class. But I can access it in the derived class.

[03:18] To review, we can set up inheritance with the extends keyword. The protected access modifier can't be accessed outside of a class just like the private access modifier, but it can be accessed in derived classes.

[03:31] If you don't define a constructor, the derived class will use the base class's constructor. If you do define the constructor in a derived class, super must be called before anything else can happen.

Sharing Class Behavior with Inheritance in TypeScript

Share this video with your friends

Course

Use Types Effectively in TypeScript