JavaScript is a flexible programming language as compared to Java and C++ that are strictly object-oriented. Some developers who either come from strongly typed programming languages like these, always complain about the flexibility of JavaScript.
However, over the past few years, JavaScript has evolved rapidly. With the release of ability to write server-side code and built web applications using frameworks like Angular and React, JavaScript as a programming language has now come up with a solution to write object-oriented code with mixture of strongly typed language. This is now possible using TypeScript.
What is TypeScript?
TypeScript is a superset of JavaScript. It adds additional features to the existing programming language, mostly, to write your code safely. From ES6, all JavaScript code is a valid TypeScript code. The additional features it adds are:
- Strong-typed variables
- Object-Oriented Programming
In Typescript, we can define a variable’s type with the strong-typing feature just like we define a variable in Java or C++. Additionally, we are able to write object-oriented code with Typescript. To install TypeScript, you need Node.js installed on your local developer machine that provides npm, the package manager for JavaScript. The next step is to install the global package of TypeScript by running the following command in your terminal’s window.
npm install -g typescript
This command will install Typescript globally so you can use it in any project. After the installation is completed, you can verify it by checking its version. Run the following command in your terminal’s window.
tsc -v
Now you can start using Typescript. Create a new file from your code editor and the extension of the file must be .ts. Note: Typescript files have a .ts extension instead of .js. JavaScript frameworks like Angular is TypeScript exclusively. All the code in an Angular project is written in various .ts files. On compilation, this .ts files or the code the TypeScript code inside these files get translated to normal JavaScript code. The reason for this is that web browsers, where the source code of your application is going to run eventually, do not understand TypeScript at all.
Typing in TypeScript
Let’s move on with the main features of Typescript. Different from JS, we can define the types of our variables as number, string, boolean, array, any and much more.
Below you can see some examples of strong typing:
let name: string; // for strings let age: number; // for any kind of numbers let isChecked: boolean; // true or false let data: any; // can be changed later to any type let array: number[]; // array of numbers
Object-Oriented Features
Type Annotations
Type annotations in TypeScript are lightweight ways to record the intended contract of the function or variable. In the example below, we intend the ‘greeter’ function to be called with a single string parameter. We can try changing the call greeter to pass an array instead.
function greeter(personID: number) {
return 'Hello, ' + personID;
}
let employeeId = [0, 1, 2];
document.body.innerHTML = greeter(employeeId);
Class and Interfaces
Another important feature of TypeScript language over JavaScript is that we can write object-oriented code. This leads to writing classes and creates interfaces. For example:
class Employee {
firstName: String;
lastName: String;
employeeId: number;
getEmployeeDetails() {
// some code
}
}
In the above code snippet, you create a new Employee class abd later we create instances with the new keyword that uses the reference of the class Employee.
let employee = new Employee(); // an instance of Student class
After assigning the Employee( ) object, you do not need to declare its type again. It is done automatically by Typescript.
Constructor Functions
Another feature in Object-Oriented Programming is called constructor( ). It is an important method. Every class has actually a default constructor method, and it is called when you create an instance of that class.
class Employee {
firstName: String;
lastName: String;
constructor(firstName?: string, lastName?: string) {
this.firstName = firstName;
this.lastName = lastName;
}
getEmployeeDetails() {
// some code
}
}
In the above snippet code, the question mark ? is a representation to make the parameters optional.
Access Modifiers
In Object-Oriented Programming, access modifiers are being used for restricting or allowing to access the variables of a class from outside. There are 3 types of access modifiers:
- Public — Allows access from outside of a class
- Private — Doesn’t allow access from outside of a class
- Protected — Allows access only within a class and its derived classes
You restrict access from outside by adding the private keyword to a class’s members since all members of a class are Public by default.
class Employee {
private firstName: String;
private lastName: String;
constructor(firstName?: string, lastName?: string) {
this.firstName = firstName;
this.lastName = lastName;
}
getEmployeeDetails() {
// some code
}
}
Conclusion
Javascript is evolving and will continue to evolve. Typescript is just one of the branches. I hope now you have a better understanding of Typescript by reading this article an got a start.
