The renascence is coming for front-end developers. A great success of Angular pushed the Google team to create another version of this framework. Huge feedback from the community made a big impact on Google’s approach to creating it. Angular 2 was written in TypeScript because of the advantages that come with the types system. It also supports ES5, ES6 and Dart. This article will focus on TypeScript, which is an open-source language developed by Microsoft. As it is just the superset of ES6, tech-following front-end developers should be familiar with it.
How to start?
Not every browser can compile TypeScript files, but all can interpret JavaScript files. To handle this problem, there comes TypeScript transpiler. To install just use
in your console. The compiler will compile .ts files into .js files. It will also throw an exception if there is any error in the code. This is a huge advantage of TypeScript – it shows the programmer what is wrong with his code at the early compiling stage.
Read also: Building your first simple app with Firebase
What does the structure look like?
Types
The name ”TypeScript” comes from the typing system. That is the major attribute of this language. It might be uncomfortable to use types if someone was close with ES5, but it has many benefits. It all depends on who you are, and what you’re going to do with code. If you are a programmer, you can avoid many bugs during the compiling time – a console will throw an error if types are not compatible with the expectations. Going through the code, you can quickly notice what the author of the code had in mind when he was writing it. Also, if you want to use some function for your own purposes, you can see if it will give you the expected result (like a type of return). Java, C++ or any other typing programming language users know this benefit very well. Let’s see some examples!
First, you have to declare a variable by using the var keyword, but after the name of the variable, you should also give a type for it, like:
Now, write some function that will use it:
Function calls will return “Hi Tomek” and “Hi Example Name”. The string was passed to the function, as it was expected, and the function returned the string, so the compiler won’t throw any errors.
Let’s try to call the function with a numerical argument, e.g.:
In this case, the function got a number as an argument. As it expected a string, the compiler threw an error:
app.ts(9,10): error TS2345: Argument of type ‘number’ is not assignable to parameter of type ‘string’.
Now, let’s focus on the possible types. There are a few types:
a)
b)
c)
d)
e)
f)
g)
It is also possible to cast one type into another. It can be done by using JavaScript’s object methods, but only by creating another variable that will be the type of what you want to get. There are several methods introduced:
The output for all those variables is:
Read also: Typescript in Node JS – what is its importance and why should you use it?
Classes
Classes are like prototypes in ES5, which may be quite confusing as it’s not the same for typical OO language. So let’s get familiar with it a bit. To define a class, you have to use the class keyword and give it a name. Now create some class called Employee and later you will add something to it.
Each class can have its own properties, methods, and constructors. Take a look.
Properties
Properties define data that is attached to a class. Add some properties to the Employee class, such as name, surname, age, and position. Every property can be optionally equipped with type as we learned before. It can be a string for name, surname and position, and number for age. The result for a class with properties proposed above will be:
Methods
Methods are functions executed only in an object’s context. Before you can use a method on the object, you need to have an instance of this object. So first, let’s create a method called greeter that will say “Hello” to our newly created employee. Add this method to the Employee class with properties that were introduced above.
We get access to the name and surname of this person by using the keyword this. It refers to the name and surname of the object to which the parameters are assigned. There is no declaration of the type that we want to return from the method, so let it be any (no declaration of type will execute any) – in this case, it will be void because there is no return statement. So, to run this method you need to have an example of class Employee. Let’s create one:
There is a shorter way to declare a variable and initiate class.
Read also: Typescript in Node JS – what is its importance and why should you use it?
Constructors
TypeScript allows you to have only one constructor per class. A constructor is a special function that is called when a new instance of a class is being created. It should be used when you assume some initial setup for new objects. The constructor’s name must be constructor (keyword). It can take parameters, but it doesn’t return any value. It happens this way because this function is executed when a new object is created, so it has no value to return. Let’s create some constructor that will parametrize your new object.
So now you can initiate your object a bit easier:
You can also make some default value for any argument. It should be useful when you have to fill some key with the value and you know that this value will be the same for many objects.
In both cases, the employee’s position will be Developer, because “Developer” is a default value for the position attribute in the constructor. If the argument position is optional, you don’t need to pass it and the constructor will fill it to Developer automatically.
In this case, you got your employee name, surname, age and position set, when the object is created.
Read also: Typescript in Node JS – what is its importance and why should you use it?
Inheritance
Last but not least, an important aspect of object-oriented programming is inheritance. Inheritance will make sure that a class receives behavior from parents class. Writing it in JavaScript won’t be easy, but in this area, TypeScript is shining. In a new class, you can override and modify those behaviors, as well as you can add new ones. It is achieved by the extends keyword. Extend your Employee class with another by adding this to your code:
Also, change the variable first to:
To sum up, a full example should look like this:
After running the TypeScript transpiler on this file, you should get Javascript file, that will look like this:
Now just load the example.js file to your index.html file:
Open your index.html file in a browser, run console and test it. You can read the properties of objects that already exist (first, second), you can call methods for them or you can create your own object by using the constructor.
Read also: Typescript in Node JS – what is its importance and why should you use it?
Conclusions
To sum it up, TypeScript can make a developer’s life easier. It was just a simple example, but when it comes to more difficult problems, it is safer to write your code in TypeScript and transpile it into a JavaScript file – it helps to avoid many mistakes. Just look how easily you can extend a class in TypeScript and compare it with the JavaScript file you received from the compiler. This is a way of testing our code at the early stage, but it shouldn’t replace unit testing. Also, as it was mentioned before, Angular 2 supports TypeScript, so it might be a good idea for Angular developers to get familiar with it.
