Classes in #TypeScript

Maybe, if you are a C# or Java programmer, or even a Python developer, one of the feature that you can miss from Python are classes (as real classes). TypeScript has classes and that’s good for code encapsulation. Using TypeScript to create classes is a powerful way to extend object-oriented programming when creating JavaScript programs.

This point of view of this language is closer to classic OOP, and not as the special way of Javascript, using prototipes. Let’s learn how to organize our code in our projects first by using modules, another cool feature of TypeScript.

Modules in TypeScript

Modules are a way of organizing projects, including classes (and all they need, of course), and functions.

Modules are flexible, and previuosly, you could read about functions. I’ll write later about modules, after this short introduction.

Classes in TypeScript

• Constructor is the way of initializing an object
• Fields are variables inside the class
• Properties let you access to the content of variables
• Functions are those that offer functionality to the class, using parameters (if any) to work with the values of the class

Although it isn’t shown in the above image, properties can be used with get and set, which facilitates the transfer of securities to and from classes with more control.

Privated fields

The fact that classes allow you to have private members is another feature of typescript. Here is an example of a function that will not compile because os an error trying to access a private variable (try it on TypeScript Playground):

class Greeter {
private _mensaje: string;
constructor(mens: string) {
this._mensaje = mens;
}
get mensaje(): string {
return "Hola " + this._mensaje;
}
}

var greeter = new Greeter("world");

var button = document.createElement('button');
button.textContent = 'TEST: ' + greeter._mensaje;
button.onclick = function() {
alert(greeter.mensaje);
};

document.body.appendChild(button);

If you work this code running and compiled into JavaScript, you must remove private. Thus, we have many tools to control data inside a class, compared to the flexibility of Javascript.

Static classes

One of the keywords used in TypeScript classes is static, meaning it can be called from outside the class, regardless of instantiating that class. The most useful that I see is to create a class with constants and variables. The major drawback of this type of property is that you need a browser with at least EMACScript 5 .

To test this class with static methods, here’s a small code that you can try at TypeScript Playground and see how it works:

class test {
static get CONSTANT(): string { return 'static "test"';}
}
document.body.innerHTML = test.CONSTANT;

Javascript compilation

Although the differences between Javascript and typescript are becoming quite significant, we must never forget that all classes and modules that we write in TypeScript modules will be translated to Javascript, and that the organization will be different. Luckily for those coming from C # or Java, TypeScript will organize the project more close to this language that the way Javascript requires (and that’s the main reason why I hate so much Javascript).

Perhaps the fact that I hate Javascript so much and how well studied is TypeScript, is the clue that I am learning TypeScript, and see web development different!

Happy coding!