Frontend development has gone far beyond JavaScript. Let's figure out what TypeScript is and why people love it so much.

The web interfaces of almost all sites are written in JavaScript. However, not everyone loves him, and there are almost no alternatives. The only competitor to JS is WebAssembly, but for several years of its existence, it has not yet been able to become sufficiently popular.

Because of this situation, the developers have two options:

1. Use JS with all its disadvantages.
2. Write code in another language and compile it to JS.

And many choose the second solution. Therefore, in recent years, several JavaScript add-on languages have appeared at once:

• Dart
• CoffeeScript
• ClojureScript
• TypeScript

The latter will be discussed in this article. In 2021, TypeScript became one of the most beloved programming languages and made it to the top in popularity (source)

What is TypeScript

TypeScript is a programming language that fixes many of JavaScript's shortcomings. TypeScript code looks almost the same as JS code, and if you have experience with frontend development, learning TypeScript is easy enough. Especially considering that you can write JS code directly in TS scripts.

TypeScript code is compiled into JS and is suitable for developing any project for any browser — especially since you can choose the JS version into which the code will be compiled.

TypeScript is an open-source project, so it is developing very quickly. Much that appears in TS will later migrate to JavaScript: let and const, arrow functions, and so on, for example.

Let's take a look at the two main advantages of TS over JS.

Strong typing

Many problems in JavaScript arise from dynamic typing and the generally strange behaviour of data types.

In TypeScript, typing is static, which eliminates a lot of problems. There are numeric, string, boolean and others. It is possible to describe your data types, for example, using an enum:

//Create a Direction enumeration containing directions
enum Direction
{
   Up,
   Down,
   Left,
   Right,
   None
}
 
//The variable d can indicate the direction
let d : Direction = Direction.Up;

Improved OOP

Both JS and TS have support for object-oriented programming: classes, objects, inheritance. However, TypeScript has taken a step further and takes advantage of more of the OPP capabilities. Including, for example, interfaces:

//create interface 
interface IPost
{
   id: number;
   text: string;
}

//Create classes that implement this interface
class Message implements IPost
{
   id: number;
   text: string;
   senderId: number;
   recieverId: number;
}

class ArticleComment implements IPost
{
   id: number;
   text: string;
   senderId: number;
   articleId: number;
}

Another big plus is access modifiers. There are three of them in TypeScript: public, private and protected. Here's an example of their use:

class User
{
   //Private members of a class that are inaccessible from the outside
   private id: number;
   private login: number;

   constructor(id: number, login: number)
   {
       this.id = id;
       this.login = login;
   }

   //Java style accessor
   public GetId(): number
   {
       return this.id;
   }

   //C# style accessor
   public get Login(): number
   {
       return this.login;
   }
}

There are other possibilities:

• Defining fields in the constructor
• Type conversion
• Abstract classes
• Generalization and so on

In the future, all of this may appear in JavaScript, but browsers will not start supporting such features very soon.

Cons of TypeScript

Developers love this language, and some large projects are already switching to it. For example, the popular Angular.JS framework. But this is still not enough for it to become as popular as JavaScript. This is because developing a TypeScript web application is more expensive and time-consuming.

Especially if you need to use some library or framework that is not ported to TS. In this case, developers will have to independently describe the signatures (specify data types) of all functions and methods — a rather lengthy process, given the size of modern libraries.

Also, the threshold for entering TypeScript is higher — to take advantage of its benefits, it is important to know data types and object-oriented programming.

Installing TypeScript

Чтобы использовать TypeScript, установите сначала Node.JS. After that, enter the command in the console:

npm install -g typescript

Now create a file with the .ts extension in the script's folder — in which we will write the code. The tsc command comes in handy to compile the code. To compile the app.ts file, enter the command:

tsc app.ts

If everything goes well, the app.js file will appear in the folder, which we will connect to the page.

You can also create a config in the tsconfig.json file to make compilation as easy as possible.

{
   "compilerOptions": {
       "target": "es5",
       "removeComments": true,
       "outFile": "app.js"
   }
}

The compilerOptions contains all the options for the compiler:

• target is the JS standard to which the code is compiled. ECMAScript 5 is listed here because it is supported by all modern browsers;
• removeComments — the parameter determines whether to remove comments;
• outFile — the file into which the JS code save.

Now it's enough to just enter the tsc command without parameters to compile our TypeScript. Note that the compiler will affect all .ts files in the current directory.

Conclusion

Although TypeScript has a very decent syntax, JavaScript will dominate frontend development for a long time to come. Therefore, in any case, you need to know him, even if you do not like him.

If you want to learn TS, then feel free to go to the documentation on the official website.