Classes
They are the blueprint for its instances (objects that the class produce).
JavaScript has had classes since the ES5 language implementations. In there it was introduced to us the native implementations of “classes” was. Typescript extends the functionalities of that feature to make it look more like more common programming languages like Java for example.
Before we continue, if you're in a hurry, here's the GitHub repository with all the code of this guide, just in case.
Now, let’s see what functionalities are and how to use them.
Basic declaration
There is no mystery here. You use the keyword class, next to the name of the class (starting it with Uppercase by convention) and open brackets.
/* ------------- Basic declaration ------------ */
class A {
a1: string;
a2: number;
a3: boolean;
constructor(a1: string, a2: number, a3: boolean) {
this.a1 = a1;
this.a2 = a2;
this.a3 = a3;
}
}
In that snippet of code, you have a1 , a2 and a3 declared at the top of the class, that’s because Typescript will use that to tell this that those are part of its constructor and will not throw an error nor syntax warnings on the editor.
I know that’s a little too much boilerplate for just a simple class, but don’t worry, keep reading and I’ll show you a shorter way of doing that.
Then you can instantiate it like this:
const aa = new A("New Class", 1, true);
console.log("Basic declaration:", aa);
With methods
Went you wanna add methods, you don’t need to declare it at the top of the class nor do you have to use the keyword function.
/* --------------- With methods --------------- */
class B {
b1: string;
b2: number;
b3: boolean;
constructor(b1: string, b2: number, b3: boolean) {
this.b1 = b1;
this.b2 = b2;
this.b3 = b3;
}
run(time: "all day" | "just the mornings" | "anytime"): void {
console.log(`I'm running ${time}, so you have this: ${this.b1} times ${this.b2} and it's ${this.b3}`);
}
}
const bb = new B("Power", 59, true);
console.log("B class:", bb);
bb.run("all day");
Encapsulation
Sometimes you’ll want to limit the kind of information that the instances share with the rest of the code, in those cases, you’ll use encapsulation.
The default way that classes instantiate their properties is public. Anyone can see them, anyone can change them, and anyone can manipulate that data.
Then, you have private properties which can only be manipulated by the class itself. By convention, you start the name of a private with an underscore _ and they are strongly related to getters and setters, which I’ll explain in a moment
Some properties can only be read and cannot be modified, not even by the class itself, those are readonly .
And finally, we have protected which is very similar to private but with the difference that protected properties can also be modified by inherited classes (I’ll talk a little bit about that later).
/* --------------- Encapsulation -------------- */
class C {
c0: any // public by default
public c1: null | number;
private _c2: boolean | string;
readonly c3: string;
protected _c4: string;
constructor({ c1, c2, c3, c4 }: { c1: null | number, c2: boolean, c3: string, c4: string, }) {
this.c0 = "Whatever";
this.c1 = c1;
this._c2 = c2;
this.c3 = c3;
this._c4 = c4;
}
get c2() {
return `Mr. C2 says that it's value is: ${this._c2}. Now you can go, please`;
}
set c2(newValue: boolean | string) {
// this.c3 = "Nope, still not changing"; // it will change the value, but the idea is to listen to typescript
this._c2 = newValue;
}
set c4(newValue: string) {
this._c4 = newValue;
}
}
const cc = new C({ c1: null, c2: false, c3: "You can only see me, not modify me", c4: "Only the class can make me change and it's children" });
console.log("Encapsulation with class:", cc);
cc.c0 = "I'm public, whatever";
cc.c1 = 975;
// cc._c2 = true; // it will change the value, but the idea is to listen to typescript
cc.c2 = "VIP";
// cc.c3 = "Time to change... hahaha, not really"; // it will change the value, but the idea is to listen to typescript
// cc._c4 = "I told you, only the class can change me, not you"; // it will change the value, but the idea is to listen to typescript
cc.c4 = "Oh, well, if you say it please.... okey, let's go";
console.log("After changes:", cc)
console.log(cc.c2)
console.log(cc.c3)
// console.log(cc._c4) // it will display the value, but the idea is to listen to typescript
In the code above you’ll see a lot of comments, that’s because since this is an implementation of Typescript, many of these keywords don’t exist natively on Javascript, so the changes that you make in those scenarios are, even if they are invalid to Typescript, it will still run went it transpile to Javascript.
Getters and Setters
Although this is not specific to Typescript but also Javascript. Getters and Setters are used to set or get a value of a property.
They are useful when you are using private or protected properties but you still want a way for the class to expose those values without directly referencing them.
Using the example above, they would like something like this:
class C {
private _c2: boolean | string;
constructor({ c2, }: { c2: boolean }) {
this._c2 = c2;
}
get c2() {
return `Mr. C2 says that it's value is: ${this._c2}. Now you can go, please`;
}
set c2(newValue: boolean | string) {
// this.c3 = "Nope, still not changing"; // it will change the value, but the idea is to listen to typescript
this._c2 = newValue;
}
}
Get
get will return the value of the property.
console.log(cc.c2)
Set
set can overwrite the value of the private property.
cc.c2 = "VIP";
Short constructor
To avoid all the boilerplate to declare the variables with their types at the beginning of the class, you can use attributes of the constructor to short that off. The only condition is to add the access type of each variable.
/* ------------- Short constructor ------------ */
class D {
constructor(
// d0: any // you need to add the type of access: public, private, etc
public d1: number,
private d2: boolean,
readonly d3: string,
protected d4: number = 888,
) { }
d5(): void {
console.log("Just logging");
}
}
const dd = new D(13, true, "Reading...", /* 99 */);
console.log("Short constructor", dd);
Inheritance
A class can have all the methods and properties that another class has. To do so, one class extends the functionalities of another, this process is called inheritance because, in some sense, the class extended will become a “parent” and the other a “child” that will inherit everything that its “parents” has.
As a side note, a class can only inherit one class at a time.
/* ---------------- Inheritance --------------- */
class E {
constructor(
public e1: number,
private e2: string = "Hi, I'm VIP",
protected e3: string = "Hello, I'm can be used be the inheritance",
) { }
e4() {
console.log("%c Here, just doing some Class E stuff", "color: pink; background-color: black",);
}
}
class F extends E {
constructor(
e1: number, // for the super class don't put the access type (public, private, etc)
public f1: number,
) {
super(e1);
}
f2() {
console.log(`Super thing 1 ${this.e1}`);
// console.log(`Super thing 2 ${this.e2}`); // privates can be extended to the children
console.log(`Super thing 3 ${this.e3}`);
super.e4();
}
}
const ee = new E(2000);
const ff = new F(2501, 3000);
console.log(ee);
console.log(ff);
ff.f2();
// class G extends A, B, C, D, {} // it can only extend 1 class at the time
Static methods
With the static keyword you can use properties and methods (mostly methods) without instantiating the class but with the class itself. Just keep in mind that the object instance this will not work as expected since there will be nothing instantiated yet.
/* ------------------ Statics ----------------- */
class G {
constructor(
public gg = "Good game, gg",
) { }
static g = "gg, GG, gg";
static ggGGgg() {
console.log(`By the way, gg. ${this.gg}. Woops, I forgot that you need to initialize my first, unless... ${this.g}...`);
}
}
G.ggGGgg();
console.log(G.g)
Abstract Classes
An abstract class is the class you don’t want to instantiate because they are too open in its definition and too vague to make an object out of it. Instead, what you wanna do is to define it and let other classes inherit from it. That’s the whole point of an abstract class.
/* ----------------- Abstract ----------------- */
// when a class is too general
// and you don't want to allow instances of that class
// but you still want to inherit
// then you can use an abstract class
interface ILiving {
name: string;
exists(): void;
}
abstract class LivingThing implements ILiving { // ignore the "interface" and "implements" for now
constructor(
public name: string = "perrito",
) { }
exists(): void {
console.log("Existing");
}
}
// const livingThing = new LivingThing("Creature"); // Just don't, ok?
class Dog extends LivingThing {
constructor(
name: string,
public power: string,
) {
super(name);
}
move(): void {
console.log("Moving using 4 legs");
}
}
const dog = new Dog("Perrito", "Perfection");
console.log("Extending from abstract class", dog);
dog.exists();
dog.move();
Interfaces in classes
Interfaces are related to objects and only exist on Typescript, not in Javascript. They declare what properties and methods the object will have and what type of data it’ll manage.
interface H {
h1: number;
h2(): number;
}
Like classes, they can extend from each other. But, there is no such thing as polymorphism, which I’ll explain in another moment, but means that you can’t overwrite a property, for example h1 with another interface.
/* ---------------- Interfaces ---------------- */
interface H {
h1: number;
h2(): number;
}
interface I {
i1: string;
i2: ILiving;
}
interface J extends H, I {
j1: boolean;
}
And you use the keyword implements to use them in your classes.
class K implements H, I, J { // in this example implementing "H" and "I" are optionals since "J" already does that
constructor(
public h1: number,
public i1: string,
public i2: ILiving,
public j1: boolean,
) {}
h2() {
return 66;
}
}
const kk = new K(44, "Welcome", dog, true);
console.log("Interfaces and classes =>", kk)
Well, there you have it. A complete guide to Object Oriented Programming using Typescript. If you have anything to add to it please comment on it or reach out to me through my social media:
Twitter, LinkedIn, Instagram, Github, Medium (For more opinion-based posts), and here on Hashnode and my Hashnode blog. Also, follow me if you want XD
Remember that here's the repository with all the code.
Have a nice day and until next time. Bye.