What Is TypeScript? Pros and Cons of TypeScript vs. JavaScript

Time to read
18 min
Category
What Is TypeScript? Pros and Cons of TypeScript vs. JavaScript
No Results Found
Table of Contents
  • TypeScript vs. JavaScript: What is TypeScript and how is it different from JavaScript?
    • How does TypeScript improve JavaScript?
    • What are the main advantages of TypeScript?
    • Several additional features of TypeScript
    • Join the discussion on Twitter!
  • Benefits of TypeScript: Why should you use it?
    • 1. Precise defining through typing
    • 2. Types make code management easier
    • 3. Increased team performance
    • 4. TypeScript is popular and trusted by the biggest players in the industry
  • Disadvantages of TypeScript
    • 1. Overly complicated typing system
    • 2. Required compilation
    • 3. False sense of security
  • TypeScript advantages and disadvantages: an STX Next’s developer’s view
  • What are some alternatives to TypeScript?
    • 1. TypeScript vs. Flow—the type-checking system from Facebook
    • 2. TypeScript vs. JSDoc—the type-supporting documentation standard
    • 3. Other strictly typed languages that compile to JavaScript
  • How can you migrate your ongoing projects from JavaScript to TypeScript?
    • 1. The hard way: everything in TypeScript at once
    • 2. The soft way: only new things in TypeScript
  • Final thoughts on TypeScript

When we think of frontend development, the first thing that comes to mind are key terms such as HTML, CSS, and JavaScript—browser-standard ways to display, style, and script the page.

But if we dig a little deeper, we’re bound to come across trending buzzwords like React, Angular, or TypeScript.

Wait a minute… TypeScript? Why would anyone want or need another “script,” when there’s already a widely used and standardized solution in place?

Read on and you’ll find out. We’ll show you:

  1. what TypeScript is and how it relates to JavaScript,
  2. why it’s worth using and how your development teams can benefit from it,
  3. how easy it is to boost your ongoing (even long-running!) projects with TypeScript.
New call-to-action

TypeScript vs. JavaScript: What is TypeScript and how is it different from JavaScript?

You’ve probably already heard the word “TypeScript” before. It certainly wouldn’t be a surprise; in 2019, TypeScript was the 7th most-used and the 5rd fastest-growing language on GitHub, with over 5 million weekly downloads of its compiler.

But what exactly is TypeScript?

Simply put, TypeScript is an open-source programming language developed by Microsoft that compiles to JavaScript. Since its release in 2012, the language has remained in active development and continues to gain in popularity every year.

The development community strongly associated TypeScript with Angular in the early days, despite them being distinct creations from the start. That was because Angular forces you to use TypeScript, though bypassing this is possible. We talk a bit more about the relationship between these technologies in our comparison of React and Angular.

The most important difference between TypeScript and JavaScript is that they are two separate programming languages, though TypeScript is heavily based on JavaScript. In fact, TypeScript is a superset of JavaScript, meaning all valid JavaScript code is also valid TypeScript code.

TypeScript doesn’t alter JavaScript, instead expanding it with new, valuable features. Everything that can be written in JavaScript can also be written in TypeScript:

This means you can also write React apps in TypeScript with no hassle at all!

How does TypeScript improve JavaScript?

The key augmentation TypeScript brings to JavaScript is a type system (hence the name “TypeScript”).

In case you’re unfamiliar with the word, “type” is a definition that tells you the intended use of given data (for instance, we have numeric, Boolean, or string types, just to name a few).

Traditionally, JavaScript is dynamically typed (much like Python). This means that a single variable can either contain text, a number, or even a whole database entity, depending on the occasion—and that’s just fine. What TypeScript does is strictly define what a given variable can contain.

Let’s say one of your developers writes an addNumbers function and uses types to define that the function can only take two numbers. TypeScript will then return an error if another developer tries to provide text to the function, whereas in JavaScript such an operation would be perfectly acceptable.

What are the main advantages of TypeScript?

Going into greater technical detail, TypeScript gives you:

1. Strict typing

Everything stays the way we define it. Need a variable to always be a number? It’ll always be a number, then.

2. Structural typing

Indispensable when you care about fully defining the actual structure you use. JavaScript allows for a lot of strange things to be done, so relying on a specific structure is a much safer solution.

3. Type annotations

A handy way of saying explicitly what type should be used.

4. Type inference

Implicit typing performed by TypeScript itself, so that your developers don’t need to provide types where the compiler can find them on its own.

To me, the main advantage of TypeScript are the autosuggestions. At the moment, I’m coding in JavaScript and this is what I miss the most about TypeScript. Having to jump files back and forth just to see the type gets tiring quickly.

My personal TypeScript success story is that thanks to it I have been able to convince our Java-heavy team to write new portions of our application for the web and move away from our legacy Swing/JavaFX stack in favor of React. Developers who are used to statically typed programming languages simply cannot live without the guidance of a compiler. You need something like TypeScript to sway them over to the web or Node.js.

 —Dawid Czarnik, Node.js developer at STX Next

Several additional features of TypeScript

You’ll be glad to learn that TypeScript isn’t just about types.

Microsoft originally set out to create a language more suitable for large-scale solutions. That was back in the bad old days of ECMAScript 5, which today is synonymous with JavaScript.

Don’t get me wrong, that version of JavaScript was absolutely usable, and it’s still used on the web to this day. But programming in ECMAScript 5 was, to put it mildly, peculiar and particularly difficult for developers coming from fully object-oriented environments like Java or C#.

Microsoft had already been using C#, often referred to as “the better Java,” and getting more and more into server-side applications. On the frontend, though, the most-used solution on the market was JavaScript. This is why Microsoft decided to write a language based on JavaScript, but bearing more similarities to those backend languages.

TypeScript introduced a great deal of syntax taken from object-oriented programming, including but not limited to:

  • interfaces,
  • classes,
  • enumerated types,
  • generics,
  • modules.

It’s true that ECMAScript 6 (or ECMAScript 2015) introduced some of those features to JavaScript—but not all of them. For instance, abstract classes or access modifiers are still nowhere to be found in JavaScript, while TypeScript has them.

And the best part of being a superset of JavaScript? Every new JavaScript feature is also a new TypeScript feature.

Based on my experience, TypeScript offers particularly significant benefits in medium-sized and large projects. I’d encourage developers to create these projects in TypeScript from scratch since migrating the existing codebase always takes a lot of work, even when you go for a ‘soft’ strategy.

—Krzysztof Kęsy, JavaScript developer at STX Next

 

New call-to-action

Join the discussion on Twitter!

Benefits of TypeScript: Why should you use it?

With its wide selection of useful types and new features, TypeScript is a great tool for JavaScript developers.

But is it worth going into TypeScript when JavaScript works well enough and your projects are doing just fine?

Let’s take a look at the advantages and disadvantages of TypeScript, and how they affect your frontend software development.

1. Precise defining through typing

When discussing the benefits of TypeScript, we need to start with its most important feature: the typing system. You’ve already seen how it looks and how it works; now, we’ll show you why it’s so great.

For starters, we have compile-time errors. You may be asking yourself, “Since when are errors a good thing?” Well, errors can be advantageous when you detect them as early as possible.

Developers who code in languages like C# or Java—with highly advanced and strict type systems—like to make fun of dynamically typed languages, claiming that errors in apps written in those languages are found by the end-user, not the compiler.

Jokes aside, though, this is a genuine issue with JavaScript. Remember the earlier example of adding numbers? That’s just one of many symptoms of this problem; in JavaScript, you’ll only find it once you use the app.

But in TypeScript, when your developer makes a mistake and enters unsupported input into the code, they’ll be made aware of it before pushing the code to the repository. And even if they were to ignore that error, you also have CI/CD systems like Jenkins that can check types and prevent them from being pushed further to production.

The ability to find these obvious yet frequently occurring errors this early makes it a lot easier to manage your code with types.

2. Types make code management easier

Detecting errors on builds early is only one of many ways developers can benefit from types. Modern development environments like WebStorm can give you more accurate code suggestions.

Even at this level, you can be warned about having type errors in your code. Since the errors aren’t found either by the user or the compiler, but the editor itself, there’s no need for you to perform a build.

Additionally, providing types is a form of documenting code. Having even brief documentation at hand can be beneficial to your developers, at the very least because they don’t need to spend their valuable time doing it themselves. This is often referred to as “self-documenting code”—one developer writes something, and others know what it does and how just by looking at it.

Annotating types also elevates your code to the next level, since we may not always wish to look at how something works in order to use it. Most of the time, we just want to see the definition of how we can use it.

For instance, addNumbers takes two numbers and returns one number. It’s the most useful information you can get from types and code documentation, and TypeScript gives it to you straight away when writing new code.

The benefits of types naturally go beyond mere code. External libraries also work great with TypeScript. It used to be that developers needed to browse through voluminous documentation to learn where a given function is, what they can use and how, or what can be safely overridden.

With TypeScript, we get all of this information directly from the development environment, which saves you a great deal of time.

3. Increased team performance

The great thing about strictly typed programming languages is that they allow your developers to work on their task without relying on the other team members too much. 

Having someone to ask about anything that goes in your project is admittedly one of the greatest advantages of teamwork, but doing it too often is a bad sign. Context switching and asking questions instead of writing code affects performance and causes tasks not to be delivered at the end of the sprint.

Granted, the choice of programming language by itself won’t do you much good if you’re struggling with issues like “spaghetti code” or badly defined acceptance criteria. However, it can help you along the way by providing useful problem-solving tips. It’s also imperative in getting started the right way.

On that note, TypeScript allows you to introduce new developers to your project faster. Explicitly defined data structures and type annotations make it incomparably easier to understand the decisions made by the engineers originally writing your code.

I can tell you from personal experience that whenever I write something new in JavaScript, I usually need to run the code first in order to see exactly what a particular function does and returns. With TypeScript, I can rely on the type definition to tell me everything I need to know.

Using TypeScript increases overall performance—of individual developers and the team as a whole—and higher performance leads to better profits.

4. TypeScript is popular and trusted by the biggest players in the industry

In the first section of this article, I gave you a few figures showing the popularity of TypeScript. Let’s take another look at them, but this time in greater detail.

Here’s how often TypeScript was downloaded from NPM over the last two years:

how often TypeScript was downloaded from NPM over the last two years

Some numbers from TypeScript’s GitHub repository:

typescript-github

According to StackOverflow’s 2020 Developer Survey,  TypeScript is currently the second most loved programming language:

StackOverflow 2020 Developer Survey results - Rust 86.1%, TypeScript 67.1%, Python 66.7%, Kotlin 62.9%, Go 62.3%

And here are the results of The State of JavaScript—the most popular survey among JavaScript developers:

The State of JavaScript 2020 survey - satisfaction, interest, usage and awareness ratio rankings - Elm, TypeScript, ClojureScript

The State of JavaScript 2020 survey - experience over time - TypeScript, Reason, Elm, ClojureScript, PureScript

Of course, these are just numbers. Popularity doesn’t necessarily mean that something is of high quality and should be trusted. Fortunately, TypeScript also enjoys support from some truly formidable players in the tech world.

The language is widely used in software products such as Slack, Asana, or Visual Studio Code. What’s more, many great JavaScript tools are written in TypeScript, including frameworks (Angular, Aurelia, or Ionic) and libraries (ZoomCharts, yWorks, or GoJS).

As if that wasn’t enough, tech giants like Microsoft (duh!), JetBrains, eBay, Ericsson, or Ubisoft are all open about using TypeScript—and who knows how many other enterprise-level companies have included it in their tech stack.

JavaScript codebase can seem a bit chaotic in its raw form—TypeScript helps to structure it better. It’s especially beneficial in larger, complex projects, and it’s definitely a game changer in data-oriented industries such as finance, product data management, etc. Even though it means dealing with lots of rules and limitations, in the end it makes application development more predictable, thus easier.

—Jakub Krymarys, JavaScript developer at STX Next

 

New call-to-action

Disadvantages of TypeScript

Of course, there are no perfect things in the world, be it physical or digital. TypeScript is not exempt from this rule and it does have a few disadvantages.

1. Overly complicated typing system

First of all, the typing system, while a great tool in many regards, can sometimes be a little too complicated to use properly. This isn’t strictly a disadvantage of TypeScript, though, but rather a downside that stems from it being fully interoperable with JavaScript, which itself leaves even more room for complications.

2. Required compilation

Another argument against TypeScript is that it requires compilation, while JavaScript doesn’t. But, let’s be honest, most of JavaScript applications these days require a build step. Whether it’s Gulp, Grunt, Webpack, Rollup, Babel, or Closure—a build step is a necessity and nothing really prevents you from expanding it.

3. False sense of security

In my opinion, the greatest disadvantage of TypeScript is that it can bring you a false sense of security. Yes, it’s a huge benefit that the language can check types for us and warn us when there’s something wrong with our code. However, relying on this too heavily comes with a significant risk: some developers tend to think that anything they write in TypeScript is 100% bulletproof. It’s not.

TypeScript performs type checks only during compilation. Afterwards, we’re dealing with pure JavaScript that doesn’t do that. This means we may still encounter some bugs that the compiler didn’t find, though admittedly there’s going to be far fewer of them than if we hadn’t used TypeScript.

TypeScript advantages and disadvantages: an STX Next’s developer’s view

We asked our programmers what they really like and dislike about working in TypeScript. Here’s what Przemysław Lewandowski, one of our Senior JavaScript developers, thinks about it.

If you know when to use TypeScript and it’s configured to match your needs, it can be a massive advantage over plain JavaScript. Having types is beneficial if you’re new to a project. You’ll immediately know the exact parameters that each function requires or the complicated structure it returns.

Combined with proper naming and code splitting, typing is another tool for writing readable, self-explanatory code that does not need additional commentary.

When me and my colleagues at STX Next introduced it to a plain JavaScript project in fintech that we took over, it worked well in the new parts of the application. We no longer needed to read through extensive function compositions to know what their outcome would be.

It also helped us to organize and standardize complex financial data structures with a lot of nested objects.

Lastly, it helped us to avoid numerous issues in situations where types would not match. Shortly put, we had more specific, better documented, and more bulletproof code of higher quality.

However, as with everything else, TypeScript has its disadvantages. Setting TypeScript too strictly, for example, having to manually type everything without relying on type inference, can be tiring and frustrating.

Also, if you need to prototype something quickly, I would personally pick plain JavaScript as it gives me greater freedom and less code to write.

You also need to be careful about introducing new libraries to a TypeScript project—adding type definitions to them is still not a standard. That one library that matches your needs does not have to have them written. You will either have to write them yourself or look for another one.

What I also found a bit more demanding with TypeScript is writing unit tests. When you are just learning TypeScript, mocking things is challenging, as everything demands getting specific types with all their properties. In JavaScript, you would not have to worry about that. Just pass the object with only the properties that you need in this particular test.

What are some alternatives to TypeScript?

TypeScript isn’t the only tool that brings types to JavaScript or frontend development in general. There are also others, and we’ll now take a look at those.

1. TypeScript vs. Flow—the type-checking system from Facebook

Flow is also a superset of JavaScript, but it isn’t categorized as a separate language. Like TypeScript, Flow offers type annotations… and that’s pretty much it. No additional syntax, everything is the same as in JavaScript.

So why is it better to go with TypeScript, when Flow covers its most important feature?

Firstly, TypeScript is more popular, which means it has better support. Consequently, better support means you’re more likely to get TypeScript type definitions for external libraries than if you were using Flow.

Secondly, in 2019, Facebook decided to move Jest—one of its most popular projects—from Flow to TypeScript. I believe this speaks for itself.

2. TypeScript vs. JSDoc—the type-supporting documentation standard

JSDoc is a living standard for documenting JavaScript code. It allows you to not only use text to write what each piece of code is doing, but also annotate types.

Development environments support JSDoc, but it’s far from perfect. Proper typing with JSDoc is difficult and it requires a lot more code than TypeScript.

The real kicker, though, is that you can write JSDocs in TypeScript—it’s also a standard there. The only difference is that you don’t need to provide types, since TypeScript by default has better tooling for it.

3. Other strictly typed languages that compile to JavaScript

Over the years, we’ve seen a number of languages that provide a strict type system and can be compiled to frontend code one way or another:

  1. Kotlin has an official JavaScript compilation solution.
  2. Rust may work on the frontend; however, it doesn’t compile directly to JavaScript, but rather WebAssembly. This WebAssembly code can then be combined and used together with JavaScript code.
  3. Go can be effectively compiled either to JavaScript—via an unofficial tool called GopherJS—or to WebAssembly, much like Rust.
  4. Elm and Reason were designed for JavaScript compilation.

All of these languages are great, but TypeScript has one key advantage over them that makes it more suitable for frontend development: TypeScript is far easier to learn for current JavaScript developers, mainly because it’s just augmented JavaScript.

The alternatives I’ve listed also have different syntaxes—some of them even use other programming paradigms—that can make the switch from JavaScript a lot more taxing and complex than switching to TypeScript.

New call-to-action

How can you migrate your ongoing projects from JavaScript to TypeScript?

Having read all this high praise for TypeScript, you might be wondering how your current JavaScript projects can benefit from it. Well, let me tell you, there’s a good chance they probably already are!

That’s because the most advanced development environments like WebStorm are using TypeScript type definitions to facilitate code development using external libraries.

Of course, that’s only a partial benefit. The current situation makes the job a little easier for your developers, but it still doesn’t give you all the good stuff like type checking.

Therefore, before you move your project to TypeScript, there’s one more key question for us to answer: can ongoing projects move easily to TypeScript?

The answer is: yes, they can. What’s more, the transition likely won’t be as time-consuming as it may seem! Here are two ways to perform a migration of this kind.

1. The hard way: everything in TypeScript at once

Simply rewriting all of your code to TypeScript may seem like the most obvious way to make the transition, but it’s also the most difficult and time-consuming (at least in the beginning).

As we already know, valid JavaScript code is also valid TypeScript code, so technically you’re not writing everything from scratch. Most of the time, you’ll be changing file extensions, running the compiler, and fixing all the typing errors you find. Also, you can configure the type-checking mechanism in different ways, so the more rigid you are about it, the more time it will take to fix everything.

It’s absolutely doable. However, this all-hands-on-deck approach is best suited for small projects and small teams. This isn’t work you can easily parallelize, and you have to put your development on hold for the duration of the process, so it won’t be possible for you to implement new features at the same time.

The advantage of going down this road is that it’s future-proof. Even though it takes longer to do it all at once, you will have everything written in TypeScript, so worrying about your old JavaScript code will be a thing of the past.

2. The soft way: only new things in TypeScript

Thanks to the interoperability of TypeScript with JavaScript, it’s possible to write TypeScript code alongside JavaScript code. TypeScript modules can be used in JavaScript and vice versa; the compiler will know what to do.

This is great, because it means you don’t actually need to move your whole project at once. All your team needs to do is spend a few hours configuring TypeScript in your project and move some basic code around—that’s it!

Afterwards, it’s up to your developers to make sure each new feature is written in TypeScript instead of JavaScript. Naturally, whenever there’s some old code to edit, you’ll be able to safely move it to TypeScript. It’s easier to fix errors in one file than hundreds or thousands of them.

This way works best for medium- and large-sized projects with a lot of people in the mix. It takes next to no time at first, and your developers can start reaping the benefits of TypeScript straight away.

The downside here is that you’ll still have legacy JavaScript code to deal with at a later date. Eventually, you’re going to have to move the rest of your code to TypeScript, and it’s going to take some time. Another possible side effect of this compartmentalization is that some segments of your TypeScript code may be badly typed, especially where your old code was used.

Despite those small drawbacks, I’d still recommend choosing this way if you decide to include TypeScript in your ongoing project.

Final thoughts on TypeScript

All things considered, TypeScript is a fantastic tool for JavaScript developers. It makes working on larger projects easier and provides a better code-writing toolkit that can greatly improve your software development process.

TypeScript is popular, trusted by the biggest players in the industry, and not as difficult as many seem to believe. After all, TypeScript is still just good ol’ JavaScript underneath.

Most importantly, TypeScript offers tangible benefits for both your developers and project stakeholders. By writing just a little more code, the language helps your teams quickly achieve better overall performance: fewer bugs, faster releases, more confidence in the code quality.

Every single project that uses or will use JavaScript stands to benefit from TypeScript. Facts don’t lie, and looking at all the figures and tech news floating around in the world of JavaScript, TypeScript is the future and the future is now.

Will your project be the next in line to join the frontend revolution? It’s up to you to decide!

Thank you for reading our article on the benefits of using TypeScript for your frontend development. We hope you’re going to give this awesome solution a shot in your next software project.

Do you have any questions or comments about TypeScript or software development in general? Feel free to leave them here, and we’ll happily get back to you.

And if you need frontend or backend support of any kind, our door is always open!

Browse our portfolio

Discover insights from over 500 CTOs

Download the report
Download the report
Content Specialist
JavaScript Developer
Share this post