Introduction.

TypeScript is called an advanced version of JavaScript because it adds static type options and object-oriented classes that are intended to make the language more extensible and reliable.

It is open source and has been maintained by Microsoft since they created it in 2012. However, TypeScript had its initial foray as the core programming language in Angular 2. Ever since, it has continued to evolve, as is the React, Vue, and NodeJs community.

In this article you and you will learn the basics of TypeScript with the help of practical examples.

I. Install TypeScript.

Before starting any coding, we need to install TypeScript on our computer. We just need to open a terminal and enter the following command:

npm install -g typescript (note the computer has npm installed)

Finished installation to check if the installation is successful or not or version of ts, we run the command:

tsc -v

II. Writing some code

Let’s create our first TypeScript file and write the simplest lines of code inside it by.

Open your IDE or Favorite Text Editor and create a file with the name ** first.ts ** – For the TypeScript file we use the .ts extension.

For now, we’ll just write a few simple lines of old JavaScript, since all JavaScript code is also valid TypeScript code:

To run the .ts file, we compile it to pure JavaScript.

III. Compiling TypeScript.

To compile the ** .ts ** file is very simple, just run the command:

tsc first.ts

This command will help compile the corresponding .js file.

IV. Data types.

TypeScript – as the name implies – is the type of JavaScript version. This means that we can assign types to different variables at the time of declaration. They will always keep the same type of data in that range.

Typing is a very useful feature to ensure reliability and scalability. Type checking helps ensure our code is working as expected. In addition, it helps find errors and errors and records our code correctly.

The syntax for assigning a type to any variable is to write the name of the variable followed by: sign followed by the name of the type followed by = sign and the value of the variable.

There are three different types in TypeScript: any type, Built-in type and User-defined type. Let’s take a look at each one.

1. Any type – any type of data.

Any is a metadata type of all data types in TypeScript. Giving any variable of type any is equivalent to not participating in the variable’s data type checking.

2. Built-in types – Predefined data types

These are the types that are built into TypeScript. These include number, string, boolean, void, null, and undefined.

3. User-defined types – Data type defined by the user.

The User-defined types include enum , class , interface , array , and tuple . We’ll talk about some of the more common ones in this article.

4. Object-oriented programming – Object-oriented programming

TypeScript supports all features of object oriented programming, such as classes and interfaces. This ability is a huge boost to JavaScript – it has always had trouble with its OOP functionality, especially since developers started using it for large-scale applications.

5. Class.

In object oriented programming, classes are templates of objects. The class defines what an object will look like in terms of the features and functions of that object. The class also encapsulates data for the object.

TypeScript has built-in support for classes, not supported by ES5 and earlier versions. This means we can use the class keyword to declare it easily.

In the above example, we have declared a Car class, along with some of its properties, that we are initializing in the constructor. We also have a method that will display some messages using its properties.

Let’s see how we can create a new version of this class:.

If you have done with object oriented programming, you are too familiar with the steps above.

We take the keyword of new and call the class’s constructor and pass it properties.

Now this Prius object has its own feature of model , doors and isElectric . The object can also call displayMake method, which will have access to Prius’s properties.

6. Interface.

The concept of interfaces is another powerful feature of TypeScript that allows you to define the structure of the variables. Why is that a paradigm includes specific features that an object must adhere to.

Interfaces are best described through an actual example. So let’s say we have an object of Car:

If we look at the object above and try to extract its signature, it would be:

If we want to use this signature again, we can declare it as an interface. To create the interface, we use the interface keyword.

Here, we have declared an interface called ICar and created a Car object. Car now binds to the ICar interface, making sure that the Car object identifies all the properties in the interface.

Conclusion

I hope this article gave you a glimpse of how TypeScript can make your JavaScript more stable and error-less.

TypeScript is a very hot keyword with development, I am also approaching it and find it very interesting, so there is something interesting that everyone can share with me. Thanks !!!!!

Reference link:

https://www.freecodecamp.org/news/learn-typescript-in-5-minutes-13eda868daeb/

https://levelup.gitconnected.com/typescript-best-practices-namespaces-exceptions-and-type-definitions-131d85579fa3