TypeScript is a relatively new programming language that first appeared about 8 years ago. It is developed by Microsoft and is a superset of JavaScript. This means that anything that you do with JavaScript can be done with TypeScript as well. But what sets TypeScript apart from JavaScript? We will take a look at this from a TypeScript point-of-view and try to answer all these questions.

Static Typing

As we already said, TypeScript is a superset of JavaScript therefore it has all of JavaScript’s features along with more of its own. One feature that stands out is the static typing present in TypeScript. People coming from an object-oriented background will be put at ease immediately when they see this. Due to static typing, we can detect bugs at compile time for type-related problems. This wasn’t possible in JavaScript until runtime.

Interfaces

TypeScript is an object-oriented programming language, but it is a multi-paradigm just like JavaScript. TypeScript supports interfaces which is a contract on how a class needs to be implemented. The interface type in TypeScript is not converted to JavaScript during transpilation but is strictly used for type checking (duck-typing). Apart from their standard use case, interfaces in TypeScript can also be used for declaring types, function types, and array types.

Even though it is a JavaScript file, with a linting extension on VS Code, you can view messages like the one shown above.

Generics and Optional Parameters

TypeScript introduced the concept of generics to further strengthen the code in terms of type safety. It allows to declare functions with the type of <T> and then allows the developer to use a specific type for the operation, which will then be preserved throughout.

If you try to push a number into the string array or a string into the number array it will show a compile-time error. Another cool feature of TypeScript that is not present in JavaScript is that of optional parameters. Remember how we created a Person interface. We can add optional parameters using the ? symbol to denote that it is optional. Any classes that implement the interface can choose to include or exclude this parameter.

Enums

TypeScript has support for enums whereas JavaScript doesn’t support enums natively. To define an enum in TypeScript, we have the enum keyword. It is similar to an object notation but doesn’t have the equals operator nor key-value pairs, just comma-separated values.

1enum Colors { 
2    red, 
3    green, 
4    yellow, 
5    blue 
6}
7console.log("My favorite color is: " + Colors.blue);

To do the same thing in JavaScript, we would have to write a bit more code. Even though this is just an object notation with key-value pairs, we freeze the object using the Object.freeze() method. This will make sure that the first-level object parameters stay the same and cannot be mutated.

1const Colors = {
2    red: "red",
3    green: "green",
4    yellow: "yellow",
5    blue: "blue"
6}
7Object.freeze(Colors);
8console.log("My favorite color is: " + Colors.blue);

Do note that object freezing doesn’t ensure complete immutability for nested objects, but only for the first level. Another drawback of using enums this way is in terms of readability. The key-value pairs both reflect the same information and is not very elegant.

Drawbacks of using TypeScript

If you have an existing project that is written in JavaScript, chances are that you would never even think of migrating to TypeScript. This is because there are no tools available to directly convert JS to TS code and it can be a painstakingly long process. Even though it is a superset of JavaScript, there is still a learning curve to it. If you’re existing team is comfortable with JS, they might take some time to get used to TypeScript. TypeScript may also not be suitable for small to medium-sized projects because of the time involved in project setup, transpilation, etc.

Transpilation is the process of converting TypeScript to JavaScript so that it can run on the browser. Even though it is mostly done on the fly, it still takes some resources to perform this. Live reloading of a page to view new changes can sometimes be a problem in large codebases due to this.

When to use TypeScript

The tagline for TypeScript is, “JavaScript that scales”. That is exactly the use case for TypeScript. It allows building large modern web applications that scale well. With a lot of type safety and predictability, it allows for early detection of bugs and at the end of the day results in more resilient software.

It was ranked second in the StackOverflow developer’s survey, behind Rust. Even though JavaScript is the most used language on GitHub, TypeScript is the fastest growing language, currently at the 4th position.

When to use JavaScript

JavaScript is still a very popular language to build web applications. For small to medium-sized projects, it is still the best option because it allows for quick prototyping and debugging in the browser. Moreover, it doesn’t take time in transpilation unlike TypeScript to convert to vanilla JS. Due to this live coding is a breeze with JavaScript.

JavaScript has been steadily adding features with each iteration and according to a survey by the State of Frontend in 2020, a huge chunk of people believe that JavaScript will have new features added that make it more like TypeScript. If that’s the case, the popularity of TypeScript might take a hit. But it is also interesting to note that, a huge majority of the people think that TypeScript might take over as the most popular language. Whatever the case may be, we would have you covered.

One Pager Cheat Sheet

• TypeScript is a superset of JavaScript developed by Microsoft, that provides extra features to allow for more powerful and efficient coding.
• TypeScript provides an advantageous feature of Static Typing that helps to detect type-related bugs at compile time while this wasn't possible in JavaScript until runtime.
• TypeScript adds static typing to JavaScript, which allows for type-related bugs to be detected at compile time rather than runtime.
• TypeScript's interfaces provide type-checking and are used for declaring types, function types, and array types, but are not transformed into JavaScript during transpilation.
• Interfaces in TypeScript are a type-checking tool that allows developers to specify the structure of data expected and create better, more robust code.
• TypeScript's generics and optional parameters allow developers to create type-safe code, while also allowing them to specify which parameters are optional.
• Interfaces in TypeScript can be extended in a few different ways, allowing for the implementation of multiple interfaces or the expansion of an existing one for greater flexibility.
• TypeScript offers native support for enums, which makes defining them easier and more readable than Object.freeze()'d key-value pairs in JavaScript.
• The challenge of using TypeScript is its learning curve and transpilation time, which makes it unsuitable for small or medium sized projects or for existing JavaScript projects; however, the availability of resources is increasingly helpful.
• TypeScript, with its type safety and predictability, is a great language to build modern web applications, and is the second most used language according to the StackOverflow developer's survey.
• JavaScript is the best option for small to medium-sized projects due to its quick prototyping and debugging features and lack of transpilation, but the future of the language is still uncertain.
• You cannot simply change the extension of a JavaScript program to .ts in order to make it run as TypeScript, as the two languages differ substantially in terms of syntax and features.