TypeScript vs JavaScript in 2021

TypeScript is an open-source language supported by Microsoft, which builds on top of JavaScript by adding optional static typing. Types provide a way to structure and validate your code before executing it. That’s extremely helpful in large-scale applications.

The complexity of the JavaScript project codebase tends to grow exponentially with each new code line, making it extremely difficult to maintain on the enterprise level. The increasing popularity of JavaScript on the server made things worse as usually backend is much more complicated than the frontend. That’s when Microsoft created TypeScript to solve this issue.

Differences Between TypeScript and JavaScript

While TypeScript is a superset of JavaScript, and JavaScript code is a valid TypeScript, they are not the same.

The main benefit of TypeScript is static typing that provides additional information about your code which serves as better documentation for other developers and enables TypeScript compiled to catch more mistakes during compilation. Writing types is optional because TypeScript is good at automatic type interference.

TypeScript code gets transformed into plain JavaScript that runs everywhere via the compiler or Babel plugin. The resulting code is simple to understand and almost precisely corresponds to the original code. Type information gets stripped as it’s mostly used for internal checks.

The language itself is pretty modern with features like interfaces, unions, intersection types, enums, classes, and visibility scopes. Of course, as a superset, it has all the modern JavaScript features like arrow functions, destructuring and optional chaining operators too.

TypeScript doesn’t affect the performance more than merely transpiling modern JavaScript to older standards for compatibility. You’re in control of choosing the target standard too.

The majority of popular packages already have corresponding type declarations for convenient usage in TypeScript. Even if typings are missing, those packages are still usable just without strict type checking and improved editor tools that TypeScript provides.

You can play around with TypeScript and see the resulting JavaScript output on-the-fly in the TS Playground.

Advantages of TypeScript Over JavaScript

Lets take a look at a short TypeScript example:

type Args = {
   first: number;
   second?: number;
}

const func = ({first, second}: Args) => first + (second ?? 0);
const result = func({first: 1, second: 3});
console.log(`The result is ${result}`);

It compiles to pretty straightforward JavaScript code:

"use strict";

const func = ({ first, second }) => first + (second !== null && second !== void 0 ? second : 0);
const result = func({ first: 1, second: 3 });
console.log(`The result is ${result}`);

Notice that types got removed, and the null-coalescing operator got replaced with the corresponding check. As you see, the TypeScript code is a bit more expressive than its JavaScript equivalent. It’s necessary to unleash the full benefits of the language.

We’ve declared a type for arguments of our function to restrict possible parameters to objects that should always have the first field that is a number and optionally have the second field that is also a number or undefined. Trying to pass anything else would give a compilation error.

When writing the function’s body, we now can’t just return first + second cause second might be undefined, and this operation would logically result in NaN in JavaScript. Fortunately, TypeScript has ?? operator to check for null or undefined that saves some typing. || would also work correctly in this scenario, but what if we wanted to treat undefined as 2?

Modern development environments have tools to leverage TypeScript even further. For example, VS Code would provide correct suggestions when writing this code, show warnings and ways to fix them. It also supports advanced code navigation and refactoring so you can easily see all the places that depend on a specific function, quickly jump to declarations, rename things without breaking anything, and so on.

Those tools work correctly because, in strict TypeScript, it’s pretty straightforward to tell what variables have what types and find an exact definition of a called function or class method.

Drawbacks of TypeScript

Despite all the benefits that TypeScript brings to the table, there are still some drawbacks.

Writing types explicitly takes more time upfront but saves resources in the long-run, especially for large projects with multiple developers or even teams. Yet, it’s the most popular argument in favor of JavaScript.

You can’t just instantly convert a massive JavaScript project to a strict idiomatic TypeScript. There are no tools to do that, and their existence is virtually impossible. Otherwise, the compiler could convert everything under the hood and provide all the TypeScript benefits for all JavaScript projects.

The language itself isn’t that hard, but there’s still some learning curve. You can’t just take an experienced JavaScript team to work on a TypeScript project from scratch.

Compiling TypeScript code does take some time, and despite it can be done on-the-fly, it still takes some time and CPU resources. Unlike with regular JavaScript, you have to wait a few seconds to see changes in the browser, so live coding suffers a bit. The tools also get slowed a lot on large codebases causing substantial delays for suggestions to pop up or for navigation to work correctly.

Most projects already convert modern JavaScript to older standards suitable for the majority of browsers. This process brings similar issues.

Using TypeScript

TypeScript gets convert to regular JavaScript, making them both completely interchangeable.

Due to increased complexity, TypeScript is most popular on the backend. Configuring Node.Js for TypeScript isn’t hard. First of all, you can use ts-node that runs TypeScript modules instead of JavaScript. It’s good for the dev environment but takes too many resources on production. For that, you’ll have to configure compilation with tsc. Here’s an in-depth guide on how to do that.

Frontends in modern applications also tend to grow pretty big. Of course, they would still benefit from TypeScript. For React, you can pass --template typescript to create-react-app, and it will scaffold the project with TypeScript configured. It’s also possible to use TypeScript with Vue. TypeScript is the primary language for Angular projects.

In more specific scenarios, you can always create a custom build pipeline with a step to compile TypeScript to plain old JavaScript using tsc.

When TypeScript Is Better

Considering all the benefits of TypeScript projects, it becomes hard to find a case when plain JavaScript would be better in the long run. Those benefits are significant for moderate and large projects. No wonder, TypeScript’s slogan is ”JavaScript that scales.”

Multiple people working together on the same project would leverage additional code documentation that script typing provides. It’s crucial to understand what parts of the project depend on the code you’re about to change. The ability to refactor, which JavaScript lacks the most, also gets extremely important as the project grows. Even code navigation in large codebases gets pretty annoying without useful shortcuts.

TypeScript also catches many mistakes by compile-time checking — no more typos, adding strings instead of numbers, passing wrong arguments, and so on. Of course, it can still be tricked, especially by type conversions. TypeScript won’t save you from unexpected JSON in backend responses either.

We suggest TypeScript for pretty much every project that would live long enough to realize all the benefits. That means pretty much all projects, except maybe some small prototypes and standalone scripts. Some parts of the extensive application are pretty independent and will never become huge, for example, Gatsby and Webpack configuration files. Creating a separate build pipeline to compile TypeScript in those isn’t worth the effort, so we would still write them in JavaScript.

Some clients have other reasons to use JavaScript, even on large scale projects. They might have on-site developers that aren’t familiar with TypeScript or plenty of internal tooling for JavaScript. While we still suggest going with TypeScript for new applications cause it’s not that hard to learn, after all, we’re ok with working on huge JavaScript codebases. Just cross fingers that some external API won’t change drastically, taking weeks to find and fix all usages in the project.

Is TypeScript More Popular Than JavaScript?

Judging by” The State of the Octoverse,” JavaScript is still the most popular programming language on GitHub. However, TypeScript is fourth and it’s the fastest-growing one among popular languages that already went ahead of PHP, C++, and C#.

StackOverflow developers survey among nearly 65,000 developers concluded that TypeScript is the second most loved programming language, beaten only by Rust. That’s no wonder considering it solves many problems of JavaScript, making development a breeze. Just like Rust brings C++ development to the next level.

It’s improbable that TypeScript would replace JavaScript in the foreseeable future, but it has very high chances to compete with it as equal if not beat it. There’s also an open-source variant of TypeScript called AssemblyScript that compiles to WebAssembly. It’s a lot stricter than TypeScript and probably closer to C# than JavaScript, yet it allows developers to use familiar syntax even for high-performance code.

Should You Learn TypeScript or JavaScript in 2021

TypeScript is getting more and more popular, and it’s worth learning no matter if you already have experience with other programming languages or just getting into programming.

However, you can’t learn TypeScript without learning JavaScript. As a superset, TypeScript shares most of its syntax with JavaScript. The runtime is also the same, as it’s later on compiled to JavaScript.

Everything you’ll learn about JavaScript will help you with TypeScript. All the basic concepts, built-in objects, and functions are the same. TypeScript is also single-threaded, and you can use all the power of modern JavaScript and Web API, like WebWorkers, WebGL, and WebRTC.

There are many more existing resources on JavaScript, but remember that TypeScript is essentially JavaScript, so all that information also applies to both. Don’t limit yourself by thinking that TypeScript has specific ways of doing things, or there must be TypeScript-specific answers to your questions.

The hardest part of learning TypeScript after mastering JavaScript is probably Generics. That’s a way to build reusable code that works with different types that share some similarities, maintaining strict type safety. It’s somewhat similar to generics in C# or even templates in C++, making it easier to grasp for people with those backgrounds.

Conclusion

TypeScript is a modern programming language loved by engineers for making web development a lot easier. Unlike JavaScript, whose initial purpose was improving HTML web pages, TypeScript was explicitly designed for modern large-scale projects. It’s truly is “JavaScript that scales.”

You can use TypeScript everywhere instead of JavaScript, as it compiles to regular JS code. That’s another reason for its fast-growing popularity.

Today, we would suggest starting every new project on TypeScript due to all the benefits it brings. Existing codebases aren’t that hard to convert either. Just changing file extensions to .ts would most-likely compile. Of course, JavaScript code won’t become a strict TypeScript automatically. It still takes some time and effort to convert.

If you’re looking to develop your application in JavaScript or TypeScript and still unsure which language would be the best or have other technical questions, please leave us a message using the form below.