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?
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.
What does the structure look like?
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:
The output for all those variables is:
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 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 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.
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.
Also, change the variable first to:
To sum up, a full example should 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.