Learning TypeScript 03 — Classes

TypeScript classes are similar classes introduced in ES6, at least the syntax is similar, but TypeScript classes are powerful.

Classes are one of the topics that you can find on a lot of languages, because this in that article when I mention some concept that is generic and not specific of TypeScript, I will add a link to an article explaining this concept, because probably you know it (ex: public, protected, abstract…).

If you never have worked with classes in JavaScript, maybe you need to read this before start with this article.

This is a class:

class Developer {
    public name: string;
    private age: number;
    public method(): void {...}
}

This class has two properties, one is public and the other is private and one method that is public too.

If I want to create a new object from this class (create an instance):

let dev = new Developer();

Sometimes I want to do something special for each instance:

class Developer {
    public name: string;
    private age: number;
    
    constructor() {
        console.log('Hello');
    }
}
let dev = new Developer(); // Hello
let dev2 = new Developer(); // Hello

Probably this ‘something’ is related to adding some initial values to your properties:

class Developer {
    public name: string;
    private age: number;
    
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}
let dev = new Developer('Alex', 0); 
let dev2 = new Developer('Quique', 0);

But if you know that one of this values will be always the same, you can do:

class Developer {
    public name: string;
    private age = 0; // Remember type inference
    
    constructor(name: string) {
        this.name = name;
    }
}
let dev = new Developer('Alex'); 
let dev2 = new Developer('Quique');

And yes, parameters can be optional:

class Developer {
    public name = 'Unknown';
    private age = 0;
    
    constructor(name?: string) {
        this.name = name || this.name;
        console.log(this.name);
    }
}
let dev = new Developer('Alex'); // Alex
let dev2 = new Developer(); // Unknown

We have some cool sugar syntax to declare properties

class Developer {
    private age = 0;
    
    constructor(public name = 'Unknown') {}
}
let dev = new Developer('Alex');
let dev2 = new Developer();

A class can implement an interface:

interface IDeveloper {...}
class Developer implements IDeveloper {...}

Or more than one:

interface IDeveloper {...}
interface IScrumMaster {...}
class Developer implements IDeveloper, IScrumMaster {...}

In the Inheritance protected properties work like that:

class Developer {
    protected name: string;
    private age: number;
}
class MiniDeveloper extends Developer {
    method() {
        this.name; // Ok
        this.age; // Nope
   }
}

You can also declare readonly properties or static properties and methods.

• Readonly: You can only set the value in the constructor or assigning it by default.

class Developer {
    public readonly name = 'Carrillo';
}
class Developer {
    public readonly name: string;
    constructor() {
        this.name = 'Carrillo';
    }
}

• Static: Accessible properties and methods from outside the class without using an instance.

class Developer {
    public name = 'Edu';
    public static year = 2018;
    public static method() {...}
}
Developer.year; // Ok
Developer.name; // No ok
Developer.method(); // Ok

And finally, TypeScript has also Abstract methods and classes, like other languages.

In conclusion, TypeScript adds some cool stuff to ES6 classes but is so important to understand find how JavaScript classes work before start with the new features from TypeScript.

You can find more info about this article in the official guide.
And info about why I’m doing this articles about TypeScript.
Let’s continue with the next chapter: Generics.
And remember, feedback is welcome 🤙.