What problem does Typescript solve ?

If you're thinking about learning Typescript but not sure about the values it brings to the table, or you're already learning it and need to understand better its purpose, here I try to give a brief overview about what Typescript is.

When we are writing javascript, or other dynamically typed languages, we have to keep information about the type of a variable in our head and hope that we use the value properly. Let's see a quick example.

Consider how many operations we can run on a message variable:

//we can try to get message length: 
message.length

//we may attempt to call message with an argument:
message("Hello World")

But wait, what is message exactly? What is the Type of the message variable? Is it a string? an array or a function? How do we even know message takes an argument and the argument is a string?

Well, in javascript, if we have doubts about the type - maybe we fail to remember it, maybe we are working with a codebase we're not quite familiar with yet - we basically rely on the Javascript runtime to throw a TypeError which will suggest to us that we were wrong about the type of the variable.

So you can imagine if message was declared as:

const message = “Typescript is fun” 

the first line of code would work, but the second would throw a TypeError telling us message is not a function.

This is because javascript is a dynamically typed language, it checks the type of message at runtime (while the program is running) and thus cannot tell you if there's a problem with your code before you run it.

Now if you're working with a small codebase you may think that's not a problem not having everything typed, but things get messy pretty quickly with little bugs here and there as your codebase starts to become larger. It would be great if we could solve that problem. That's where typescript comes in.

static type checking
Typescript is a static type checker for javascript, it is called static because it runs before your code runs and it is a type checker because it tells you
ahead of time if there's something wrong with your code as it relates to how you attempt to use different types.
Coming back to our example earlier, when we tried to call message with an argument.

const message = “Typescript is fun”
message("Hello") //(Error) This expression is not callable.

Typescript would show a red squiggly line under message and would tell us
This expression is not callable. Type 'String' has no call signatures.
So we can infer from this message that our variable is not a function but a string, attempting to call it will break our program.

At a high level this is what Typescript does, it adds a type system to javascript to help us developers catch bugs in our program early on, in the example above we relied on Typescript Type Inference ability so we didn't have to explicitly tell typescript that message is a string, we'll learn more about explicit types in a later post and how typescript deals with them.

Comments

[vladi160]

Your example is wrong and you don't explain, for what actually is TS. In the first example you will get an error, too - var message = "text"; message('hello');
Uncaught TypeError: message is not a function

Also: function message(text) {console.log(text); return text;}

[Ricardo Paul]

Hey vladi, thank you for your comment. When I say 'the first line of code would work' I refer to the line message.length, because message is declared as a string, the line would actually return message length as opposed to the second line which would fail by trying to call message