100 Days of TypeScript (Day 2)

In 100 days of TypeScript (Day 1), I created a basic TypeScript “application” where two numbers could be added together. This was intended to introduce you to get the pre-requisites in place for writing TypeScript code, as well as acquaint you with using the type system. I promised, at the end of the post, that I would rewrite this application to use the TypeScript class system instead.

Before I start writing the code, it is worth looking at what classes are, both in a general sense and then in how they relate to TypeScript/JavaScript.

Simply put, a class is something that allows us to group data and behaviour together into an object; this sounds complicated, but is actually really simple. The idea about using a class is that we put everything that we need to do in one place. Imagine that I want to group together everything to do with playing a guitar, so I create a guitar class. This has certain attributes (data) that applies to it such as the number of strings, the type of guitar it is, the manufacturer, model; possibly it has pickups, and so on. These could all be grouped together into one class called Guitar. It also has things that we can do to it, so for an electric guitar, we can choose which pickups we are using, we can adjust the tone controls or change the way the guitar is tuned. These behaviours or actions can all be added to the Guitar class. In other words, everything we need is grouped into one object.

Note: In a future post, I’ll demonstrate how we would break that Guitar class down into smaller classes that are much more specialist.

When TypeScript was first created, classes were something that were being considered for JavaScript, but which hadn’t actually been officially released. TypeScript allowed us to write code that used classes, and outputted code that JavaScript would use without having the class keyword; when classes were formally added to JavaScript, our TypeScript code could be recompiled to use them natively.

So, what does a class look like? For our addition class, we can start out with an empty definition that looks like this:

class Addition { }

This isn’t very useful as it stands, so I am going to add something called fields to represent the two numbers I want to add together. A field is just the name we give to the thing that holds the data for our class. Adding our fields looks like this:

class Addition { 
    number1: number = 0;
    number2: number = 0;
}

In the code here, I have added my two number fields and given them an initial value of 0. I had to give them an initial value because TypeScript complains there is no value if I don’t.

Before I get into the part where I create our add method, let’s take a look at how I put values into number1 and number2. In order to get to these two fields, I have to do something called instantiation. So, Addition is our class – to use it, we create an instance of the class (this is why it’s called instantiation). To create an instance of our class, we use a special keyword called new. It looks just like this:

const additionInstance = new Addition();

With this, I now have the ability to set the values of number1 and number2 directly.

additionInstance.number1 = 10;
additionInstance.number2 = 20;

Going back to the Addition class, I am now going to write the addition method (In object-orientation, you can think of a method as the name we give to a function).

public Add(): number {
    return this.number1 + this.number2;
}

In my Add method, I get access to the number1 and number2 fields with the special this keyword. What this does is give methods in the class access to other parts of the current instance of the class.

Now that I have completed the Add method, I can now call it from my instantiated code. The instantiation code now looks like this:

const additionInstance = new Addition();
additionInstance.number1 = 10;
additionInstance.number2 = 20;
console.log(additionInstance.Add());

And that’s it! We have created our first TypeScript class here. In the next tutorial, I will demonstrate how we can hide fields so they cannot be accessed outside the instance of the class and introduce constructors that help us to instantiate our classes with a bit more flair.

The code for this post can be found here.