TypeScript Learning Adventures: A Tale of Love and Hate - Setup and introduction

A friend recently started working on a big project with TypeScript for the first time.

Every 2-3 days, he would message me on WhatsApp saying he hates TypeScript.

Complaining about how it only slows him down, he must fix weird errors and type a lot of code for nothing.

Few days of silence and then again the same message from him:
“Oh I forgot to tell you something: I hate TypeScript”.

I got so used to that, I started playing his game and after 2 days of silence, I sent him a message:
“You know what, I have to ask you something important. You didn’t tell me if you hate TypeScript?”

I love when ideas for my articles come from people I know and their problems, so I decided to write a new series of articles, where I will explain everything you need to know to start working in TypeScript.

What is TypeScript?

TypeScript is a programming language that was developed by Microsoft.

It is a superset of JavaScript, meaning that TypeScript is a language that includes all possible valid JavaScript plus some extra features and functionality, and syntax on top of that.

Typescript compiles down into regular JavaScript so that the browser can understand it.

This means that all valid JavaScript is technically valid Typescript but not necessarily the other way around. All valid TypeScript isn’t necessarily valid JavaScript.

TypeScript is a superset of JavaScript and it was designed for the development of large-scale applications.

What exactly does TypeScript offers?

Well, one of the main features TypeScript offers is type checking.

By default, JavaScript is a very loosely typed language meaning that we the developers don’t have to specify variable and function types when we use them.

We can just use var or let or const whereas, in higher-level languages such as C# or Java, you would have to specify the variable types like int, boolean, string, float or double and so you might be thinking well isn’t that just an extra step?

Well, there are a lot of really good advantages to being able to define and check your types.

For example, you can make sure JavaScript code is a lot more readable and descriptive. This is especially important when you’re building a large-scale project where you have a lot of different variables and functions and you need to keep track of what exactly each variable is and what’s expected of it.

The thing about TypeScript’s type checking is completely optional you don’t have to use it if you don’t want to.

Another feature TypeScript offer is classes which means we don’t have to use prototypes anymore and we can use object-oriented programming principles such as encapsulation inheritance and we can even use access modifiers.

TypeScript also supports ES6 syntax so it’s pretty cool.

How to install TypeScript?

The first thing you need to do (if you haven’t already) is to install Node.js.

So if you don’t have Node.js installed, you need to go to no nodejs.org and you should see some options there to download and install it.

Node.js is coming with a tool called NPM (node package manager) which is the tool that you need to use to install TypeScript.

Once you get Node.js installed you want to open up a command line and then you want to run the command:

npm install -g typescript 

Flag -g is for global, so it can be accessed from any project on your machine.

You can confirm installation if you type:

tsc -v

This will display your current TypeScript version. At the time of writing this, the newest up-to-date version is 4.9.5.

Compiling TypeScript code

Open your favorite text editor.

I’m using Visual Studio Code and I recommend it. It’s very useful for syntax, highlighting and error checking, and stuff like that but you can use whatever you want.

So we need to create a TypeScript file, which we can name main.ts.

This is the file where we’re going to write all of our TypeScript code and then compile it into a JavaScript file.

Inside main.ts we can write:

console.log("Hello world");

Now, to compile it, we can run a simple command in the terminal:

tsc main.ts

The keyword tsc stands for a TypeScript compiler and you want to pass in the name of the file that you want to compile.

When you execute this, you will see it generated a main.js file in the same folder where the main.ts file is located.

This main.js file is what would be included in your browser or imported into your application. The .ts files are only for our benefit the developers.

.ts files themselves don’t get included in your browser because your browser can’t read TypeScript but it can read JavaScript.

Now, these files look identical because we didn’t write any special TypeScript in our main.ts file.

What we wrote is just plain JavaScript code so when we compiled it, it just looked the same.

Let’s delete everything in main.ts and type this code:

let user: string;
user = "John Doe";

So this is how you define types in TypeScript.

You define a variable name, then a colon and then you can define the type of variable that you want.

If you compile this again, you can see how the main.js file changed now:

var user;
user = "John Doe";

It looks a little bit different than the main.ts file. The JavaScript file doesn’t have that string type because that’s specific to TypeScript.

What would happen if I gave a user variable value of a type that is not a string?

Let’s change the code to this and try to compile it:

let user: string;
user = 5;

As you can see we get an error:

error TS2322: Type 'number' is not assignable to type 'string'.

So in our .ts file TypeScript recognizes “hey this is supposed to be a string” so when we decide to try to assign it to a variable that’s not a string it throws an error.

Now what is important to know, this still compiles into regular JavaScript.

Compiled code is still valid JavaScript so the browser won’t have any errors:

var user;
user = 5;

The TypeScript files are only for the developer’s benefit so that we can keep track of all the different types of the different variables but the browser doesn’t care about any of that.

That’s all for the first part, the next part will be all about Typescript types, so stay tuned.