Understand how classes work in TypeScript
K-Sato
Posted on March 26, 2020
Basics
Here is an example of a class in TypeScript.
A class mainly consists of the following:
- Properties
- Constructor
- Methods
The syntax should look somewhat familiar if you have used any OOP language before.
class Person {
// (1) Property(ies)
name: string;
// (2) Constructor
constructor(name: string) {
this.name = name;
}
// (3) Method(s)
intro(): string {
return `I'm ${this.name}`;
}
}
const nick = new Person("Nick");
nick.intro(); //=> I'm Nick
Inheritance
You can inherit another class using extends
in TypeScript.
As you can see in the example below, a class inherits all the members(like properties and methods) from the base class.
One thing you should pay attention to here is the super
keyword in the constructor of the User
class.
In TypeScript, when you want to initialize its own members in a subclass(child class), you have to use the super
keyword to call the parent constructor and pass the property values.
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
intro(): string {
return `I'm ${this.name}`;
}
}
class User extends Person {
id: number;
constructor(id: number, name: string) {
// The super keyword
super(name);
this.id = id;
}
showIdName(): void {
console.log(this.id, this.name);
}
}
const user1 = new User(1, "John");
user1.intro(); //=> "I'm John"
user1.showIdName(); //=> 1 'John'
Public・Private・Protected modifiers
Public
All the members of a class in TypeScript are public
by default.
You can also explicitly declare it like the code below. The public
members can be accessed anywhere even outside the class. And the values of public
properties can be changed outside the class as well.
class Pet {
public type: string;
constructor(type: string) {
this.type = type;
}
}
let taro = new Pet("mammal");
taro.type //=> mammal
taro.type = "reptile";
taro.type //=> reptile
Private
The private
members are only accessible in its class. It even can't be accessed in a subclass.
class Pet {
public type: string;
private name: string;
constructor(type: string, name: string) {
this.type = type;
this.name = name;
}
}
let taro = new Pet("mammal", "Taro");
taro.name //=> Property 'name' is private and only accessible within class 'Pet'
// Subclass
class SpecialPet extends Pet {
roar(): void {
console.log(this.name); //=> Property 'name' is private and only accessible within class 'Pet'
}
}
Protected
The protected
members are very much like the ones marked as private
, except that the protected
members can be accessed in subclasses.
(Here, I changed name
to a protected property.)
class Pet {
public type: string;
protected name: string;
constructor(type: string, name: string) {
this.type = type;
this.name = name;
}
}
// Subclass
class SpecialPet extends Pet {
roar(): void {
console.log(`${this.name}!!!!!!!!!`);
}
}
let goro = new SpecialPet("mammal", "Goro");
goro.roar(); //=> "Goro!!!!!!!!!"
Readonly modifier
The properties declared as readonly
can be accessed outside the class but their values can not be updated(changed).
class Person {
readonly name: string;
constructor(name: string) {
this.name = name;
}
}
const jenny = new Person("Jenny");
jenny.name;
jenny.name = "Jaz"; // Cannot assign to 'name' because it is a read-only property.
Static Properties
In TypeScript, the static
members are only accessed using the class name and dot notation(.
), without creating an object of the class.
class School {
static startingTime: string = "9am";
static start(): void {
console.log(`${School.startingTime}!!!!!!!!`);
}
}
School.startingTime; //=> 9am
School.start(); //=> 9am!!!!!!!!
Abstract classes
There are mainly two things you should remember about abstract classes
in TypeScript.
- (1) Abstract classes are only used for inheritance. Thus, You can not create an instance of an abstract class.
- (2) You can define
abstract methods
within an abstract class. Theabstract methods
do not include any actual implementation in the abstract class and they must be implemented in the derived class.
abstract class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
scream(): void {
console.log("AAAAAAAAAA");
}
// Abstract method
// It must be implemented in the derived class.
abstract shout(): void;
}
class Dog extends Animal {
shout(): void {
console.log("OOOOOOO");
}
}
// const animal1 = new Animal("name"); //=> Cannot create an instance of an abstract class.ts(2511)
const dog1 = new Dog("Yoppy");
dog1.scream(); //=> AAAAAAAAAA
dog1.shout(); //=> OOOOOOO
References
Posted on March 26, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.