TypeScript - Class Syntax, Constructor, Member Variables, Methods and Getters/Setters

[Last Updated: Sep 7, 2018]

TypeScript supports Object-oriented style class features which are very similar to languages like Java, C# etc.

Class with constructor, member variables and methods

person-class.ts

class Person {
    //member variables
    name: string;
    age: number;

    //constructor
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    //method
    displayAsString(): void {
        console.log(this);
    }
}

let person: Person = new Person("Ashlee", 23);
person.displayAsString();
let pName: string = person.name;
console.log(pName);

Output

Person { name: 'Ashlee', age: 23 }
Ashlee

In above example, TypeScript class looks very similar to ES6 syntax, but it has additional type declarations and member variables. JavaScript ES6 does not allow to declare member variables on class level. Let's see what is the compiled JavaScript code of above class:

var Person = /** @class */ (function () {
    //constructor
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    //method
    Person.prototype.displayAsString = function () {
        console.log(this);
    };
    return Person;
}());
var person = new Person("Ashlee", 23);
person.displayAsString();
var pName = person.name;
console.log(pName);

By default TypeScript compiler (tsc) compiles to the JavaScript code that has function based ES5 class syntax. To compile TypeScript code to ES6 we have to use --target es6:

D:\typescript-classes>tsc --target es6 person-class.ts

The compiled JavaScript file is now:

person-class.js

class Person {
    //constructor
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    //method
    displayAsString() {
        console.log(this);
    }
}
let person = new Person("Ashlee", 23);
person.displayAsString();
let pName = person.name;
console.log(pName);

Accessors

TypeScript supports getters/setters (accessors) in pretty much the similar way as ES6 Class does. TypeScript additionally allows to use optional types on getters/setters. Let's add getters/setters in above example:

person-class2.ts

class Person {
    _name: string;
    _age: number;

    constructor(name: string, age: number) {
        this._name = name;
        this._age = age;
    }

    displayAsString(): void {
        console.log(this);
    }

    get name(): string {
        return this._name;
    }

    set name(value: string) {
        this._name = value;
    }

    get age(): number {
        return this._age;
    }

    set age(value: number) {
        this._age = value;
    }
}

let person: Person = new Person("Ashlee", 23);
person.displayAsString();
let pName: string = person.name; //calling getter
console.log(pName);
person.age = 25;//calling setter
person.displayAsString();

Output

Person { _name: 'Ashlee', _age: 23 }
Ashlee
Person { _name: 'Ashlee', _age: 25 }

Compiled JavaScript (using --target es6 option):

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
    displayAsString() {
        console.log(this);
    }
    get name() {
        return this._name;
    }
    set name(value) {
        this._name = value;
    }
    get age() {
        return this._age;
    }
    set age(value) {
        this._age = value;
    }
}
let person = new Person("Ashlee", 23);
person.displayAsString();
let pName = person.name; //calling getter
console.log(pName);
person.age = 25; //calling setter
person.displayAsString();

Static members

In TypeScript we can have static methods and static variables as well. For example:

class Counter {
    static count: number=0;

    static updateCounter(): number {
        return ++Counter.count;
    }
}

let count = Counter.updateCounter();
console.log(count);

Output

The compiled JavaScript code (--target es6)

class Counter {
    static updateCounter() {
        return ++Counter.count;
    }
}
Counter.count = 0;
let count = Counter.updateCounter();
console.log(count);