Understanding what TypeScript is and how to use it?

To fully understand the content of this article, it is preferable that you are already familiar with Javascript, if that's not the case, I invite you to take a course on one of these platforms beforehand.

Why TypeScript?

If we do a quick analysis of its name, TypeScript is a contraction of "Type" and "Javascript", which already tells us a bit about its reason for existing.

Javascript is an untyped language (we also speak of dynamic typing), which means that when you declare a variable, you natively don't have the ability to tell the Javascript interpreter to make sure that such data corresponds to a specific type.

While this brings an advantage of flexibility and speed of writing, we quickly discover that this comes at the expense of the quality and robustness of the code, because it is much more prone to human error.

It's to address this problem that in 2012, Microsoft released the first version of TypeScript, meant to help web developers produce more robust code.

This is why I don't recommend learning TypeScript before Javascript, because if you've never encountered the issues related to Javascript before, it's harder to understand the real strengths of this language.

What is TypeScript?

We know why TypeScript was created, but what is it really? Is it a language independent of Javascript, or are the two linked?

TypeScript is defined as being a "superset" of Javascript (in French we talk about "sur-ensemble", or inclusion), this means that syntactically, TypeScript includes all of Javascript's syntax, and adds features on top of it, such as the ability to add static types for data.

Does this mean that a program written in Javascript is also a valid TypeScript program?

Yes, even if depending on the TypeScript compiler's configuration this can cause some issues, in principle a Javascript program can be compiled by TypeScript.

However, the reverse is not necessarily true, because as soon as we use the features added by TypeScript, the code will no longer be interpretable by a JS runtime engine without being compiled beforehand.

It's this nature that makes TypeScript a powerful language, but one that loses all its value if it's written without a linter and without a fairly strict compiler configuration, because the compiled code could end up being neither more robust nor faster.

Compilation

Once a program is written in TypeScript, it will need to be compiled into JavaScript, because regardless of the execution environment (web or NodeJS), the only interpreted language remains Javascript.

With the exception of Deno which natively supports TypeScript, but which isn't yet found in production.

Some developers think that TypeScript is an independent language and that it has an effect during runtime, but that's false: Once compiled into Javascript, nothing remains of TypeScript.

Static type checking happens at compile time, and once this step is done, your program no longer has the ability to check the types of its variables while the code is running!

Except if you want to validate data loaded dynamically (http payload, localStorage, etc...), but that has nothing to do with TS.

The language's compiler is called tsc for "TypeScript Compiler", and we're going to see how to use it to compile your first .ts file

How to get started?

The first thing to do is to install the TypeScript compiler with NPM:

$ npm install -g typescript

Once installed, you'll be able to generate a base configuration file for the compiler:

$ tsc --init

By default the compiler's output code will be ES3 compatible, if you want you can change this line in the tsconfig.json file:

//tsconfig.json
...
  "target": "es2015",
...

Next we'll be able to create our first index.ts file:

//index.ts
const str: string = "Hello World";
console.log(str);

Then we'll compile it into Javascript by calling the TypeScript compiler:

$ tsc index.ts

And there you go, that's it! You'll see an index.js file appear which will contain your TypeScript code, compiled into Javascript:

//index.js
const str = "Hello World";
console.log(str);

You see, here the compiler only had to remove any reference to the strict type to turn the TS into JS, but that's because our code was valid. Now try changing the type of the string variable to number.

index.ts:1:5 - error TS2322: Type 'number' is not assignable to type 'string'.

Here TypeScript prevented us from making a mistake by assigning a value of the wrong type, which could have had consequences on the execution of our code!

Going further

In this article I tried to introduce you to the basics of TypeScript to help you understand the true nature of this language, why it exists and why you should use it whenever possible.

More articles will come soon to go further, but if you want to already start learning the language and its tools, I invite you to check out the official "TypeScript in 5 minutes" guide:

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

And you can also use the online playground to practice:

https://www.typescriptlang.org/play