Easy Tutorial
❮ Java Different Of String Stringbuffer Stringbuilder Div Scroll ❯

TypeScript Beginner Tutorial

Category Programming Technology

What is TypeScript?

TypeScript is a free and open-source programming language developed by Microsoft. It is a superset of JavaScript, extending its syntax.

Syntax Features

For more content, refer to: TypeScript Tutorial.

Differences Between JavaScript and TypeScript

TypeScript is a superset of JavaScript, extending its syntax. Existing JavaScript code can work with TypeScript without any modifications. TypeScript provides compile-time static type checking through type annotations.

TypeScript can process existing JavaScript code and compile only the TypeScript code within it.


Installing TypeScript

We can install TypeScript through the following methods:

Interface When Installing via MSI File:

class.ts(12,42): The property 'name' does not exist on value of type 'Shape' class.ts(20,40): The property 'name' does not exist on value of type 'Shape' class.ts(22,41): The property 'width' does not exist on value of type 'Shape' class.ts(23,42): The property 'height' does not exist on value of type 'Shape'

Next, we add public and private access modifiers. Public members can be accessed anywhere, while private members are only allowed within the class.

Next, we modify the above code, declaring color as private and the constructor parameter name as public:

...
private color: string;
...
constructor ( public name: string, width: number, height: number ) {
...

Since the color member variable is set to private, the following message will appear:

class.ts(24,41): The property 'color' does not exist on value of type 'Shape'

Inheritance

Finally, we can inherit from an existing class and create a derived class using the extends keyword.

Next, we add the following code at the end of the class.ts file, as shown below:

class Shape3D extends Shape {

    volume: number;

    constructor ( public name: string, width: number, height: number, length: number ) {
        super( name, width, height );
        this.volume = length * this.area;
    };

    shoutout() {
        return "I'm " + this.name +  " with a volume of " + this.volume + " cm cube.";
    }

    superShout() {
        return super.shoutout();
    }
}

var cube = new Shape3D("cube", 30, 30, 30);
console.log( cube.shoutout() );
console.log( cube.superShout() );

Derived class Shape3D explanation:


Reference Documents

** Click to Share Notes

Cancel

-

-

-

❮ Java Different Of String Stringbuffer Stringbuilder Div Scroll ❯