Introduction to TypeScript and its features

0

If you’ve been wondering what TypeScript is and whether it’s optimal to use this language in your next web development project as an alternative to JavaScript, you’ve come to the right place. In this web programming tutorial, we’re going to talk about what TypeScript is, how it’s different from JavaScript, and the basics of getting started with TypeScript.

What is TypeScript?

Created by Microsoft, TypeScript is an open source programming language. It includes a set of Object Oriented Programming (OOP) features that are useful for maintaining code quality. You can think of it as the ES6 version of JavaScript, with a few extra features like strict type binding.

Note that TypeScript is a superset of JavaScript. It adds additional benefits to the language while allowing you to write normal JavaScript code. Today, the use of TypeScript in the programming world is on the rise and more and more companies are adopting this powerful language.

Read: TypeScript encoding outside of Angular applications.

Benefits of TypeScript

So why should you prefer TypeScript over JavaScript? What TypeScript features are missing from JavaScript? Here are some things to consider when comparing TypeScript and JavaScript:

Compiling in TypeScript

JavaScript is an interpreted language, which means that in order to verify that everything is working as expected, you need to run it in the browser. If there are any errors, you have to find and debug them while writing the code and so it takes more time and effort.

TypeScript, however, offers the convenience of checking for errors at compile time. If syntax-related errors occur, TypeScript will compile those errors and report them before the script runs, saving you from dealing with runtime bugs that are generally more difficult to identify and debug.

TypeScript is reliable

The refactoring process is reliable and easier in TypeScript than it is compared to JavaScript. TypeScript a ‘Types‘which support agility while refactoring code. It catches type-related errors at compile time rather than waiting for an exception to occur at run time.

TypeScript static type functionality

JavaScript is not a strongly typed language. TypeScript, however, comes with a static type checking function (although its use is optional) and a type inference system. In TypeScript, sometimes you don’t need to write the type before the name of a variable; instead, it is automatically inferred, and assigning values ​​of other types to this inferred variable will generate an error – this is accomplished through the TypeScript Language Service (TLS).

TypeScript vs JavaScript

TypeScript must be compiled into JavaScript to be executed in a browser. You might be wondering why TypeScript code is compiled into JavaScript. This happens because browsers cannot understand TypeScript; they only understand JavaScript. For this reason, TypeScript must first be compiled into JavaScript; then this compiled JavaScript is executed on the browser.

Now we can ask ourselves the question: if TypeScript is to be converted to JavaScript, then why would we bother to write our code in TypeScript? The answer is that TypeScript offers type checking at compile time rather than at run time. If you try to run code with errors, the compiler will throw those errors and ask you to fix them before running the program. This is where TypeScript shines.

Read JavaScript web development tutorials.

Features of TypeScript

Below is a list of some of the important features of the TypeScript programming language for web developers.

Object Oriented Programming (OOP) TypeScript

TypeScript is an object-oriented programming language. This feature makes it smarter than JavaScript. Object oriented programming helps to make the code base robust and clean. The features of OOP also make TypeScript code more manageable and organized. Below is an example of TypeScript Classes and Objects used in a program:

 
class Person {
   name: string = ''
   age: number = 0 
 
   greetings(){
     return 'Hello, ' + this.name;
   }
}
 
// creating a new instance of a class
const person1: any = new Person()
person1.name="Mike"
person1.age = 27 
console.log(person1.greetings()) // renders Hello, Mike
 

Type system in TypeScript

Below is a list of the default types available in TypeScript:

TypeScript interfaces

We can define interfaces that allow us to describe what the object will look like, which is not possible with JavaScript. You can create an interface and define it in the class as follows:

interface ServiceFee {
    Deduction(amount: number); // Deduction() will look like this
}
 
class BankAccount implements ServiceFee {
    Deduction(amount: number){
		// define Deduction() here		
			…
 
    }
}

Code readability in TypeScript

In TypeScript, code is written in classes and interfaces. Classes and interfaces provide organization to the program, so it’s easy to maintain and debug code. You can see the code snippet below and observe how well the code is organized in TypeScript compared to JavaScript:

 
class Example 
{ 
Greet(){ 
console.log("Hello world")
 } 
} 
let fun = new Example();
fun.Greet();

In JavaScript, the equivalent of the above code can be written as:

var ExampleFunc = (function () {
 function Example() 
{ 
} 
ExampleFunc.prototype.Greet = function () { 
console.log(Hello!" ); 
}; 
return ExampleFunc; 
}()); 
 
var fun = new ExampleFunc(); 
fun.Greet();

Support for ES6 features

TypeScript is a superset of ES6. It contains all the features of ES6 as well as some additional features. An example of such functionality is the Lambda function. ES6 slightly modified the syntax of anonymous functions called big arrow functions:

setInterval(() => {
console.log("Hi!")
}, 4000);

Read: Explore TypeScript Fat Arrow.

TypeScript Quick Start Guide

Now that we understand some of the features and benefits of TypeScript, let’s configure TypeScript and get our hands dirty writing some code in it.

To get started you need to install NodeJS and a package manager like npm Where thread so that you can use TypeScript locally.

Once the above is configured, you can install TypeScript using the following command:

npm install -g typescript

-g indicates here that we are installing TypeScript globally. To install it as a development dependency, replace the -g with -D.

Once TypeScript is installed, you will be able to compile any TypeScript file into a JavaScript file. Write the following code in TypeScript to see how it works:

const myObj = {
	message: "What’s up?",
};
 
console.log(myObj);

Compile this code using the following code:

tsc .ts

A new file with .js will be created in the same folder and you can run this file like any JavaScript file.

TypeScript Tutorial

TypeScript is an awesome, organized, and highly scalable programming language. It is a widely used object-oriented programming language and many companies have started to use it. It assists in the development of agile applications and provides convenience to the developer community around the world regarding the maintenance and optimization of their applications. We hope this article has helped you understand the basics of TypeScript.


Source link

Share.

About Author

Leave A Reply