Typescript, what?

As I am learning more about Javascript, Typescript has come up a handful of times already. Each time I hear someone talk about it or come across it on a blog, I’m always thinking, “What is Typescript?” So I decided to dig a little more and find out what all the commotion is about this “Typescript.”

So what is Typescript?

According to their website,

“Typescript is a typed superset of Javascript that compiles to plain Javascript.”

It is an open-source, object-oriented programming language that was developed by Microsoft and made public in October 2012. Microsoft wanted to create a language that helped with the development of large-scale applications to alleviate the shortcomings of Javascript, which was not originally built to support large-scale applications. They also did not want to break the compatibility with Javascript and thus, Typescript was born.

Okay, cool, but who really uses Typescript?

A lot of people do actually! Check out the 2019 survey from StackOverflow.

Named top 10 most popular languages from StackOverflow’s 2019 survey

As we all know, Javascript continues to reign as the number 1 most popular language. But, look! Typescript is actually in the top 10 most popular languages of 2019 and is continuing to grow.

Named 1 of the top 3 most loved languages from StackOverflow’s 2019 survey

Typescript has also made the top 3 of the most loved languages in 2019 so we can see that many developers are finding immense value from this language.

Okay, okay, you got my attention. Now, tell me how Typescript can help me as a developer.

Some advantages of Typescript is that it gives developers object-oriented concepts, like classes, inheritance, modules, interfaces, etc., and it supports Javascript libraries.

Typescript works on any browser, any host, and any operating system that Javascript runs on.

A great feature of this language is that it supports static typing, which means that it checks for the correct variable type at the time of compiling, which is not available in Javascript. This means you can check for possible errors without having to run the code first. This helps developers write more structured and maintainable code, which is great when you are building large-scale applications.

Javascript, however, is dynamically typed meaning that the 7 dynamic types (undefined, null, boolean, number, string, symbol, and object) are checked at runtime instead. This means you will get errors after your code has run, leaving you more prone to errors.

Another cool thing about this language is that any code written in Typescript can be converted to Javascript and vice versa. You can also compile your Typescript code to reflect different versions of Javascript, like ES5 or ES6. Since the browser does not understand Typescript code, it must be “transpiled”, or compiled and translated, into Javascript with the Typescript compiler. Once it’s transpiled, the browser is then able to read the code in Javascript and display it correctly.

Show me some examples!

LEFT: Typescript code, RIGHT: After the Typescript code is transpiled to Javascript code

Here is an example of how Typescript code looks before and after it’s converted to Javascript code. In the Typescript code, we have created a class “Greeter.” You may notice that the greeting property in the constructor is prefaced with the keyword “public.” This denotes that the greeting property has a public, or global, scope. You can also see that “greeting” is given a variable type of “string”, meaning that this property can only accept strings as its value. On the right, you can see the Javascript code (ES6) after it has compiled from the Typescript code.

Typescript example

Here we are explicitly stating that this function “add” can only accept numbers as its parameters. When we try to pass in the string “hello” as the second argument, Typescript sees that this is an error, underlines the error in red, and gives us the error message below.

Typescript error message

Typescript will give us an error message if we hover over the error underlined in red and when we try to transpile our code. The errors provided also give you a good indication on how the error can be fixed.

However, if we were to code this function in Javascript, we may have not caught this error.

Javascript example

When we try to pass a number, 23, and a string, “hello”, to this function, Javascript will see the second argument and think we are attempting to concatenate 2 strings together. Javascript does not give us any errors and, as a result, we are given a string of “23hello”, which is definitely not what we wanted.

Another great thing about Typescript is that we don’t always have to specify types in our code because Typescript will automatically determine types if no specific type is explicitly stated, also known as “type inference.”

An example of type inference in Typescript

In this example, we are setting a variable “example” to the number “23”. When we try to reassign this variable to a string, Typescript has already assumed that this variable should only accept numbers as its value and will give you an error message. There are ways to go around this, especially if you wanted your variable to accept all types, but I won’t get into that here.

I hope this gives you a brief introduction to what Typescript is. I have only scratched the surface on what it can do to help us as developers.

Now, I want to try!

If you want to try playing with Typescript on your own, you can install it easily to your computer.

This installs it globally on your computer.

Run the “tsc” command with the name of the Typescript file(.ts) to transpile your code to Javascript code.

This command will create a “tsconfig.json” file for you and you can manipulate this file so you can do cool things like not having to run the “tsc” command each time you want to transpile your code or setting the version of Javascript you would like your Typescript code to convert to.

A look inside the tsconfig.json file

You must also make sure that your text editor is setup to support Typescript so you may need to install a plugin for Typescript in order to full take advantage of Typescript in your editor. If you are using Visual Studio Code, the support is built-in, so there’s nothing to install!

If you don’t want to install Typescript just yet, Typescript also has a page where you can try out the language without installing it on your computer.

For more information, you can also check out these links:

Happy coding!