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
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.
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.
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
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).
What’s left are called objects
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.
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
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
The any type is very simple. We simply don’t know what type we’re dealing with so it might as well be
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 —
undefined and special case
Note: I use Visual Studio Code, Ayu Mirage theme with the Source Code Pro font.