Typescript vs. Javascript: The key differences you should know in 2021

Let’s start the battle TypeScript vs JavaScript with an introduction of both technologies. JavaScript is a scripting language, that was developed by EMCA’s Technical Committee and Brendan Eich. It works perfectly in web-browsers without the help of any web-server or a compiler. It allows you to change HTML and CSS in the browsers without a full page reload. That is why it is used to create dynamic and interactive web pages.

TypeScript is a superset of the JavaScript language. It was presented and developed by Microsoft technical fellow Anders Hejlsberg in 2012. Typescript has appeared for a certain reason: the more JavaScript grew, the heavier and more unreadable js code became. It turned up especially evident when developers started to use JavaScript for server-side technologies.

TypeScript is an open-source language that has a compiler, that converts TypeScript code to JavaScript code (see TypeScript playground service). That compiler is cross-browser and also open-source. To start using TypeScript, you can rename your .js files to .ts files, and if there are no logical mistakes in the js code, you get valid TypeScript code. So, TypeScript code Is JavaScript code (and vice versa) just with some additions. To learn more about those additions, watch the original video presentation of TypeScript. Meanwhile, we discuss the key differences between js and ts in 2020.

TypeScript vs. JavaScript. A short comparison before we start

To be honest, almost nothing has changed in JavaScript and TypeScript technologies (and as a result in differences between them) for previous years. If you are already familiar with them, be calm because your knowledge is still up-to-date.

And yet, there is one black swan that the world hasn’t faced before. It’s a coronavirus that made a shift not only in the technology sector but in the whole world. Companies went to remote working, economies have been isolated from each other for several months; some still do. That led to a disruption in the world value chain for hardware production. Even when factories will be reopened and deliveries will be resumed, it will take time to revive the production. It’s possible, that software becomes the growth catalyst for the technology sector in the coming time, and demand for software programmers will increase. We expect the growth both in small and large projects, so use any language: either JavaScript that is convenient for development not very complicated projects in small teams or TypeScript that is designed to work with large projects in huge teams from all over the world.

And yet, JS and TS – key differences

Type system

The first important thing to speak about is a type system. JavaScript is dynamically typed. That means that technically you can do anything you want because JavaScript doesn’t know the type of a variable until the code is running. That leads to irritating bugs when you try to use the variables with wrong types for some commands. One of the instrument JavaScript offers to solve that problem is “use strict” mode that prevents you from using undeclared variables and throws an error for any assignment to a non-existing property/variable/object.

For its part, TypeScript has a static typing. TypeScript type system offers you incredibly rich opportunities: interfaces, enums, hybrid types, generics, union/intersection types, access modifiers, and much more. And you are not allowed to use undeclared variables.

Dynamic typing is more flexible by allowing programs to execute the code skipping some insignificant errors that static typing never allows. That decreases the development time, learning is easier in JavaScript, the amount of lines of the code is less. Nevertheless, dynamic typing may lead to errors we have mentioned. And since JavaScript tries to execute the code anyway despite the run-time errors, debugging becomes difficult.

The advanced static type system of TypeScript helps to avoid such a situation, but cost you more time to set up a codebase with proper strict typing. However, one of the goals for the development of TypeScript was to help catch mistakes early and make development efficient.

Compiler

JavaScript code doesn’t need to be compiled, while TypeScript code does. After code compilation TypeScript code becomes pure JavaScript, so it’s a development instrument first.

Server-side / client-side

Some people compare JavaScript and TypeScript in terms of their usage on client / server-side and claim that js has an advantage because it’s both client and server-side, while ts is not. From our point of view that is an incorrect comparison, because TypeScript code compiles to pure JavaScript that is both server and client-side. So here you shouldn’t worry about the differences.

Declaration files

The basic principle that needs to understand is that TypeScript basically stays very true to JavaScript type system and just allows you to statically describe what is going on in JavaScript. The purpose of declaration files is to define a semantic subset of JavaScript libraries and that makes sense.

Let’s get on with it.

Declaration files, if you’re not familiar with them, are just files with d.ts. extension that contains declarations of modules and namespaces, where a module is any file containing values, functions, or classes. And we speak exactly about declarations of them, not implementation. That files generated automatically by TypeScript compiler when you run your code through it. When TypeScript code is compiled, it becomes pure JavaScript code with all functions that the original code has. Sharing JavaScript code and a declaration file allows developers to use the original code without the presence of the original TypeScript code. In other words, declaration files help distribute js libraries.

To learn more, you can clone the “DefinitelyTyped” repository from GitHub to get access to all popular libraries. When you need to use external script files in ts, you understand how convenient declaration files are.

Another feature that declaration files offer and that can be helpful is completion in your editor. That speeds up your development process and make coding easier.

When the code is converted, JavaScript doesn’t use declaration files, so they need only to TypeScript compiler and your TypeScript code.

Size of projects

TypeScript is a language that makes the code more consistent, clean, simple, and reusable. Thanks to static typing and declaration files TypeScript code is much easier to maintain and share. Also, TypeScript works great in bug prevention and helps to avoid spending time looking through code to find a silly mistake. So, it is better to use TypeScript for large projects.

Should you use TypeScript in all projects? No.

You can’t debug TS code in a browser, but using JS you can. It is impossible to skip the compile step in TS (and the step takes time), in JS there is no need to wait. You can’t quickly write a code in TS because you need to declare everything, in JS you can write whatever code you want and it will work if there are no logical errors in it. We can say, that JavaScript is perfect for simple web applications, and that will stay true for much longer.

Salaries

According to Stack Overflow, salaries for TypeScript and JavaScript developers are approximately the same both in the United States and all over the globe. In the United States companies pay TypeScript developers 120 thousand dollars a year, while they pay 8 thousand dollars less to JavaScript developers. Over the globe, these numbers are 57 and 53 thousand dollars respectively.

IDE’s

TypeScript supports a lot of different IDEs, while JavaScript does not. For most developers that is a basic tool required to write and test the code, and refactoring becomes much easier as well. Using IDEs, you get intelligent code completion and error catch as you type that drastically speeds up the process of coding. The best and most popular IDEs are Visual Studio Code, WebStorm, Atom.

Typescript vs. Javascript. A comparison table

So what to choose?

As a novice

You should definitely start with learning JavaScript. But when you learn the basics of that go to TypeScript. The biggest hurdle for TypeScript is the learning curve. Yeah, TypeScript offers a lot of useful tools to manage, share, debug, and write the code, but you need to know how that tools work to use them efficiently. Besides that, TypeScript is a superset of JavaScript, so you must know JS before starting to learn its more complicated roommate.

As a middle developer

If you don’t know TypeScript but have a desire to work on more complicated projects, it’s time to learn TS. From the other side, if you are an experienced developer who is working on relatively small coding projects and in small teams, JavaScript is fine. Since salaries are almost equal, there is no financial reason to switch to TypeScript too. However, if you have knowledge, ideas, or need for team development, then Typescript becomes a more preferred option.

As a senior developer

Well, you have already known everything possible about JavaScript and TypeScript, and we guess that you have skills in them both. You do not need to choose any of them and the only thing you should know is that this year we don’t think anything will change in those technologies.

Typescript vs. Javascript. Resume

JavaScript is an easy language to learn, while TypeScript has a tough learning curve and requires prior knowledge of scripting. Airbnb, Codeacademy, and Instagram are a few companies that use JavaScript, while TypeScript is used by Asana, Clever, Screen Awards, etc. TypeScript supports static typing, which allows you to type-check at compile-time, whereas JavaScript does not. The compiler significantly reduces the likelihood of “dumb” mistakes, such as missing commas and misspelled variable names, but it also kills the beauty of JS when most of the solutions could be written on their knees and tested in the browser console.

Strong typing of TypeScript allows you to more fully describe the properties and methods of objects and classes, which eliminates the need, which, for some developers, is very annoying, to check all arguments included in a method or function. This item works both for good and for bad because it is necessary to describe all types for all objects, classes, variables, which was not typical of JavaScript before.
It will be easier to read the code in TypeScript since there is no jumble of code typical of Javascript. But it should be noted that if you use abstractions can in JS, that greatly simplifies the perception of the code.

It should be noted that many are attracted by JavaScript. But as soon as they begin to study it, a kind of chaos and unpredictability of the language strikes the eye. If you prefer TypeScript, it is possible to transfer all your favorite libraries from JS to TS, if necessary. However, migration of existing popular JS solutions to TS requires labor costs. You see, for each ported lib it is necessary to describe the .d.ts file, which contains all the returned types and the description of all methods. Although porting monsters like jQuery, for example, took a lot more effort. So maybe this is not that much work after all. TypeScript currently has support in every popular IDE, including IDEA, WebStorm, Sublime, Atom, and so on. That is why you won’t have to change your favorite development environment.