Public, Private, Protected, Static and Abstract in Typescript

Public

accessed everywhere

Private

it cannot be accessed from outside of its containing class

Protected

Same as Private, and could be accessed within the deriving classes

Static

those that are visible on the class itself rather than on the instances

Abstract

base classes from which other classes may be derived. They may not be instantiated directly. Unlike an interface, an abstract class may contain implementation details for its members.

The abstract keyword is used to define abstract classes as well as abstract methods within an abstract class.

They can implement methods of their own. They can define methods that inheriting classes must implement.

Readonly

Readonly properties must be initialized at their declaration or in the constructor.

class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // error! name is readonly.

get / set (Accessors)

TypeScript supports getters/setters as a way of intercepting accesses to a member of an object.

class Employee {
    fullName: string;
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}

const fullNameMaxLength = 10;

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (newName && newName.length > fullNameMaxLength) {
            throw new Error("fullName has a max length of " + fullNameMaxLength);
        }

        this._fullName = newName;
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}

In this version, we add a setter that checks the length of the newName to make sure it’s compatible with the max-length of our backing database field. If it isn’t we throw an error notifying client code that something went wrong.

To preserve existing functionality, we also add a simple getter that retrieves fullName unmodified.

accessors with a get and no set are automatically inferred to be readonly. This is helpful when generating a .d.ts file from your code, because users of your property can see that they can’t change it.

TypeScript compiler targets ECMAScript5

constructor

When you declare a class in TypeScript, you are actually creating multiple declarations at the same time.

The first is the type of the instance of the class.

A Constructor is a special type of method of a class and it will be automatically invoked when an instance of the class is created.

If a class has no constructor, a constructor is provided automatically.

A class can have any number of constructors

We’re also creating another value that we call the constructor function. This is the function that is called when we new up instances of the class.

The constructor function also contains all of the static members of the class.

Another way to think of each class is that there is an instance side and a static side.

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
let greeter: Greeter;
greeter = new Greeter("world");
console.log(greeter.greet());

Reference

[1] https://www.typescriptlang.org/docs/handbook/classes.html [2] https://ultimatecourses.com/blog/typescript-classes-and-constructors#classes-and-constructors

puddlejumper26 / blogs