Create your first TypeScript Class - - Part 6
I'm writing a series of articles about Typescript as extra material to support my upcoming Angular 4 book. This is the sixth part of that series. Check out part 1, part 2, Part 3, Part 4, and Part 5.
This entry will teach you about creating your own classes. A class is like your own variable type with data and functions to process that data.
Create a Class
Create your class stub:
class Echo {
}
This creates a class named Echo. The purpose of this class is to create and store our welcome message. Let's start by creating some properties on the class:
static readonly messageIntro : string = "Hello"
subject : string;
private message : string;
The subject is a relatively normal variable. It is a string that contains the subject of our welcome message. The message is similar, but has the private distinguisher. This means that the message variable is private to the local message. It will contain the final message once it is put together, but is only accessible inside the class, not from code accessing an instance of the class.
The messageIntro is a bit different. We are not able to define constants inside of a TypeScript class, so instead I used the readonly keyword. This means the value will not be changeable, just like a constant. I also define the messageIntro as a static property, which means it exists on the class and not on an instance of the class.
Every class needs a constructor, so create one:
constructor(subject : string){
this.subject = subject;
}
The constructor will be called automatically when we create a new instance of the class with the new keyword. This constructor accepts one argument, the subject. The code just saves the subject argument into the subject variable.
Now, add a createMessage() function:
createMessage():void{
this.message = Echo.messageIntro + " " + this.subject + "<br/>";
}
This concatenates the read only messageIntro variable with the subject and a line break. We had similar code in previous samples, but not encapsulated into a function. The return type of this function is void, meaning nothing is returned.
We'll add one final function to our class:
echo():string{
return this.message;
}
This function returns the complete message. The message value could be blank if the createMessage() function as not called yet, however this will still work.
Now, create an instance of the Echo class:
var echoInstance : Echo = new Echo('World')
This uses the new keyword to create the new instance. You may have seen this in other languages. You can output the subject for testing purposes:
console.log(echoInstance.subject);
You can also try to output the message:
console.log(echoInstance.message);
Since the message is a private variable, you'll see a compile error:
By the same token, we can access the messageIntro static value:
console.log(echoInstance.messageIntro);
console.log(Echo.messageIntro);
Can you guess which line works before trying to compile the code? The second one is the proper way to access static variables. The first one will throw an error:
Our final code is to output the value to the screen:
document.body.innerHTML = echoInstance.echo();
Compile the code--you should see no errors--and load it in a browser:
In a non-sample application, I might try to make my classes more discrete. Since this one adds a line break at the end of the message, it is conflating data processing and display code, something which is undesirable in real world applications.
Review the Generated Code
This is the generated code:
var Echo = (function () {
function Echo(subject) {
this.subject = subject;
}
Echo.prototype.createMessage = function () {
this.message = Echo.messageIntro + " " + this.subject + "<br/>";
};
Echo.prototype.echo = function () {
return this.message;
};
Echo.messageIntro = "Hello";
return Echo;
}());
var echoInstance = new Echo('World');
echoInstance.createMessage();
document.body.innerHTML = echoInstance.echo();
The Echo class is created using an immediately invoked function expression. The static class property is created as an instance variable inside the class--remember that JavaScript doesn't have the concept of readonly or static properties. The subject and message variables are not defined since they do not have default values. They'll be created on the class when they are needed, which is inside the function.
Although beyond the scope of this tutorial, inheritance is supported with TypeScript, so one class can inherit from another.
