What is TypeScript? And Should You Learn it?

Introduction

TypeScript has become increasingly popular among programmers in recent times. In the 2022 StackOverflow Developer Survey, TypeScript was voted among the top 5 most loved programming languages.

So what is TypeScript? What about it made it earn a spot on the top 5 most loved languages? Should you learn it? And what are the pros and cons of using TypeScript? These are the questions that are answered in this blog post.

What is TypeScript?

TypeScript is an open-source programming language created and maintained by Microsoft. It was first released on October 2012.

TypeScript is a superset of JavaScript. In simple terms, it means TypeScript is essentially JavaScript but with additional features. And the additional feature is static typing. To get a better understanding of what this means, we need to take a look at the two type checking that exists.

Static Typing Versus Dynamic Typing

Every programming language has a system for checking that values have been assigned their correct types. This is known as type checking. Type checking is useful for minimizing errors during execution of the program.

Programming languages comes in 2 flavors. Some languages are dynamically typed (type checking occurs during runtime eg. JavaScript, Ruby, Python). Others are statically typed (type checking occurs during compile time eg. Java, C++, Go).

Dynamic Type Checking

With dynamic type checking, explicit type declaration is not required. This means that type errors can only be detected later during execution of program. Variable assignments are dynamic and can be altered. This can lead to less optimized code as runtime errors are possible.

let myVariable = "Hello World"
console.log(myVariable) // Prints Hello World

myVariable = 23
console.log(myVariable) // Prints 23

In the example above, we first declare myVariable and assign to it the string "Hello World". The same myVariable was then assigned the number 23, thus overriding the initial string type that the variable was assigned.

This is the freedom that dynamic typing offers. This freedom can cause some issues. Let's consider another example

function subtractNums(a, b) {
    console.log(a - b)
}

let firstNum = 5
let secondNum = 3

subtractNums(firstNum, secondNum) // Prints 2

firstNum = "Five"
secondNum = "Two"
subtractNums(firstNum, secondNum) // Prints NaN

When the subtractNums function is called the first time, it prints the number 2.

However, when the function is called the second time, it prints NaN. When debugging this code, we can tell the function was in a way expecting numbers as parameters but we gave it strings as arguments. Since, the - operator works on number types and not strings, NaN is logged to the console.

Note, we only get the NaN when we run the program. Wouldn't it be beneficial if we could get a prompt drawing our attention to it even before we run the program? That's where static typing comes in.

Static Type Checking

When it comes to static type checking, explicit type declaration is usually required. This helps in detecting errors earlier and produces more optimized code. Its worth noting that variable assignment are static and cannot be changed, hence the name static typing.

Let's use the same example above in TypeScript (which is a statically typed language).

// TypeScript

function subtractNums(a: number, b: number) {
    console.log(a - b)
}

let firstNum = 5
let secondNum = 3

subtractNums(firstNum, secondNum) // Prints 2

firstNum = "Five" // Type 'string' is not assignable to type 'number'.
secondNum = "Two" // Type 'string' is not assignable to type 'number'.

subtractNums(firstNum, secondNum) // Prints NaN

Okay, so what is happening here? First of all, when we run the code, we get the same results. The first call of the subtractNums function prints the number 2. And the second call of the function prints NaN.

The difference here however is that even before we run the program, we have an error that says the following;

// Type 'string' is not assignable to type 'number'.

This is because when declaring the function, we also declare the types of the parameters as numbers.

(a: number, b: number)

This means anytime the subtractNums function is called, the arguments given to it should be numbers. Otherwise, an error will be thrown even before we run the program.

Also, once we declare the variables firstNum and secondNum as the numbers 5 and 3 respectively, we cannot change them from numbers to strings as we did in the JavaScript code earlier. When we do that, we will get error Type 'string' is not assignable to type 'number'.

Should You Learn TypeScript?

So... should you learn TypeScript? Well, it depends on who is asking. Let me explain.

If you've learned how to code with JavaScript. And have gained some experience building projects with JavaScript, then yes, you should learn TypeScript. I will offer some reasons why in the next subsection of the post.

However, if you're still new to JavaScript, then a better approach will be to continue learning. First, build some projects and gain some experience writing code in JavaScript before you consider picking up TypeScript.

Read what the Official TypeScript Documentation has to say

The answer is that you can’t learn TypeScript without learning JavaScript! TypeScript shares syntax and runtime behavior with JavaScript, so anything you learn about JavaScript is helping you learn TypeScript at the same time.

Using TypeScript - Pros and Cons

Pros

Early bug detection

We've already mentioned that TypeScript uses static type checking. This means using TypeScript will help you to detect most errors during compile time instead of run time.

For example, If you have a function that should take only numbers as arguments and you accidentally pass in a string, it would prompt you even before you run the program. And you can address it.

This is useful because it reduces the likelihood of bugs during execution of the program.

Improved Readability of Code

Code written in TypeScript is self-explanatory. Type definitions increases code clarity and serves as a sort of documentation.

Supported by Major Frameworks / Libraries

The most popular frontend frameworks / libraries available support TypeScript. React, Angular, Vue and others provide TypeScript support by default.

Ability to use modern JavaScript Features

TypeScript is compiled down to JavaScript for browsers. This means with TypeScript, you can use modern JavaScript features not yet available on old browsers. It will be compiled in a that those old browsers can read and run your program just like if you're using a tool like babel to compile your code.

Advantage on the Job Market

As TypeScript increases in popularity, its being included in more job requirements. There are still many developers who aren't familiar with TypeScript. So you get to enjoy an added advantage as a candidate if you can work with TypeScript.

Cons

Takes longer to write code

When you're starting with TypeScript, it may take some time to get used to. Writing the various type definitions for your program can sometimes be a pain especially in the beginning. However, if you stick with it, eventually it becomes a better experience.

Conclusion

In this blog post, we've discussed TypeScript, what it is and how its relationship with JavaScript. We looked at the differences between dynamic type checking and static type checking. And also considered some of the pros and cons of TypeScript.

Considering the trends, its likely TypeScript is going to be the new normal in the near future. Should you learn it (especially as a new programmer)? Yes. However, that should be after you've gained some experience writing programs with JavaScript.

I hope you found this useful. Thanks for reading.

Let's connect on LinkedIn | Twitter

Benjamin Semah