Click here to Skip to main content
15,113,245 members
Articles / Programming Languages / Typescript
Technical Blog
Posted 27 Oct 2021

Stats

3.1K views
7 bookmarked

100 Days of TypeScript (Day 2)

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
27 Oct 2021CPOL4 min read
Creating the first TypeScript class
This is Part 2 of a 100 part series introducing you to TypeScript if you’ve not used it before; which will give you a brush up on things you already know if you’ve used it, and maybe introduce you to some new things that you might not have come across before. In this part, you will see what classes are, both in a general sense and how they relate to TypeScript/JavaScript.

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:

TypeScript
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:

TypeScript
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:

TypeScript
const additionInstance = new Addition();

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

TypeScript
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).

TypeScript
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:

TypeScript
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Pete O'Hanlon
CEO
United Kingdom United Kingdom
A developer for over 30 years, I've been lucky enough to write articles and applications for Code Project as well as the Intel Ultimate Coder - Going Perceptual challenge. I live in the North East of England with 2 wonderful daughters and a wonderful wife.

I am not the Stig, but I do wish I had Lotus Tuned Suspension.

Comments and Discussions

 
Question100 Days of TypeScript (Day 2) Pin
Dimiter201129-Oct-21 8:00
MemberDimiter201129-Oct-21 8:00 
AnswerRe: 100 Days of TypeScript (Day 2) Pin
Pete O'Hanlon30-Oct-21 1:38
mvePete O'Hanlon30-Oct-21 1:38 
GeneralRe: 100 Days of TypeScript (Day 2) Pin
Dimiter20112-Nov-21 6:44
MemberDimiter20112-Nov-21 6:44 
GeneralRe: 100 Days of TypeScript (Day 2) Pin
Pete O'Hanlon2-Nov-21 9:49
mvePete O'Hanlon2-Nov-21 9:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.