TypeScript — JavaScript with superpowers

TypeScript — JavaScript with superpowers

Javascript is cool. But do you know what’s even more cool?


Can you tell what’s wrong with this code?

TypeScript (left) and ES6 (right)

TypeScript can — see that little red underline? That’s Typescript giving us a hint something is horribly gone wrong.

You probably figured this one out (good job) — toUpperCase() is a type of String method. We’re passing an integer as the argument, thus we can’t call toUpperCase() on an integer.

Let’s fix it by stating we can only pass the type String as an argument to our nameToUpperCase() method.

Great! Now instead of having to remember nameToUpperCase() only accepts a String, we can trust Typescript to remember it. Imagine having to remember thousands, if not — tens of thousands methods and all the argument types. Bananas!

We still see red though. Why? Cause we’re still passing an integer! Let’s pass a String now.

Notice TypeScript gets compiled to Javascript (it’s just a superset of Javascript, much like C++ to C)

That’s the big-big argument why TypeScript and type checking is great.

TypeScript had 10,327,953 downloads in the last month.

Typescript downloads compared to Flow downloads

Let’s explore the TypeScript world — we’ll take a deep dive later, but first let’s understand what exactly Typescript is and why it exists.

TypeScript first appeared on 1st of October, 2012. It’s being developed by Microsoft, lead by Anders Hejlsberg (lead architect of C#) and his team.

TypeScript is completely open sourced on GitHub, so anyone can read the source code and contribute.

TypeScript — JavaScript that scales.

How to get started

It’s simple actually — all we need is a NPM package. Open your terminal and type the following:

We should end up with the Typescript config.

All we need to do is create a .ts file and tell the Typescript compiler to watch for changes.

tsc — typescript compiler

This is we what we should end up with

Great — now you can follow along with our examples!

We write the code in .ts files, the .js is the compiled version for the browser to read. In this case we don’t have a browser, we’re using Node.js (so the .js is for Node to read).

Javascript has seven data types which 6 are primitives, the the rest are defined as objects.

Javascript primitives are the following:

  • String
  • Number
  • Undefined
  • Null
  • Symbol
  • Boolean

What’s left are called objects

Typescript shares the same basic types with Javascript but have a couple extra types in the bag.

The extra types are optional and you don’t have to use them if you’re not familiar with them. I’ve found that’s the beauty of Typescript, it doesn’t use much force and is not as restrictive.

The extra types are the following:

Imagine tuples as organized arrays. You predefine the types in the correct order.

unorganized array vs tuple (organized array)

If we don’t follow the sorting index rules we issued for our tuple, Typescript will hint us we didn’t go by the rules

The tuple expects the first value to be a number — but it’s not in this case, it’s a string "Indrek" and thus giving us an error.

In Typescript, you have to define the return type in your functions. Like so:
There are functions which don’t have a return statement;

Notice how we declare the argument type AND the return type — both are strings.

Now what happens if we don’t return anything? Real world example would be a console.log statement inside the functions body.

We can see the Typescript compiler telling us: “Hey, you didn’t return anything but you explicitly said we HAVE to return a string. I’m just letting you know that we didn’t follow the rules.”

So what if we don’t want to return anything? Let’s say we have a callback in our function. We use the Void return type in such situations.

But in case we do return a value, implicitly or explicitly, we can’t have the return type of Void

The any type is very simple. We simply don’t know what type we’re dealing with so it might as well be any

For example;

Notice how we’re reassigning the person’s type around so many times. First it’s a string, after a number and finally a boolean. We simply can’t be sure of the type.

Real world examples would be if you’re using a 3rd party library and you don’t know the types.

Let’s take an array. You pull some data from an API and store it in the array. The array consists of random data. It won’t consist of only strings, numbers nor will it have a organized structure like a tuple. Any type comes to the rescue!

If you know the array only consists of one type, you can explicitly state that to the compiler, like so:

While this article is gaining length, we’ll continue in the next chapter. We still have to cover couple last basic types — enum — never — null — undefined and special case type assertions.

Here’s the docs in case you’re interested in learning more.

Note: I use Visual Studio Code, Ayu Mirage theme with the Source Code Pro font.

Part II

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now