class – typescript to js | Chinese Rule of Eight

ref – https://www.geeksforgeeks.org/typescript-class/

typescript

// typescript code

class Student {

studCode: number;

studName: string;

constructor(code: number, name: string) {

this.studName = name;

this.studCode = code;

}

getGrade() : string {

return "A+" ;

}

gets converted to js:

var Student = /** @class */ (function () {

function Student(code, name) {

this.studName = name;

this.studCode = code;

}

Student.prototype.getGrade = function () {

return "A+";

};

return Student;

}());

What does ‘this’ reference inside a function in an IIFE?

We have functions in IIFE, and we see that it uses this. But what does this reference?
As you can see from the example below, the ‘this’ keyword refers to the IIFE object.

var test4 = (function() {

var name = 'ricky';

function sayBye() {return 'bye bye';}

function sayHello() {console.dir(this); return 'hallo!!!' + name;}

return {

hello: sayHello,

bye: sayBye,

}

}());

> test4.bye()

“bye bye”

> test4.hello()

hello reference sayHello function. sayHello logs the ‘this’ keyword of the IIFE.
It will display the IIFE object.

Object
bye: ƒ sayBye()
hello: ƒ sayHello()
__proto__: Object
“hallo!!!ricky”

However, notice that we return a literal object. We can’t use new on the literal object because it’s not a function. So we must change this a bit in order to accomodate ‘new’.

var Student = /** @class */ (function () {

function Student(code, name) {

this.studName = name;

this.studCode = code;

}

Student.prototype.getGrade = function () {

return "A+";

};

return Student;

}());

So in our IIFE Student, we have a function constructor Student. That way when we go new Student, it would be valid because we can instantiate a function instructor.

var Student = /** @class */ (function () {

// notice function constructor!

function Student(code, name) {

this.studName = name;

this.studCode = code;

}

Student.prototype.getGrade = function () {

return "A+";

};

return Student; // return the func constructor so we can use new

}());

var a = new Student(123, 'haha');

console.log(a.getGrade()); // A+

Accessing Attributes and Functions

A class’s attributes and functions can be accessed by the object. With the help of ‘ . ’ dot notation or bracket notation([”]) we access the data members of a class.

// typescript code

class Car {

//field

engine:string;

//constructor

constructor(engine:string) {

this.engine = engine

}

//function

display():void {

console.log("Function displays Engine is : "+this.engine)

}

//create an object

var o1 = new Car("geeks")

//access the field

console.log("Reading attribute value Engine as : "+o1.engine)

//access the function

o1.disp()

// JS code

let Car = (function() {

// create function constructor so we can call new on it

function Car(newEngine) {

this.engine = newEngine;

}

// functions get attached to prototype object

Car.prototype.display = function() {

console.log("Function displays Engine is : "+ this.engine)

}

return Car;

}());

var o1 = new Car("geeks");

//access the field

console.log("Reading attribute value Engine as : " + o1.engine);

//access the function

o1.disp();