If you're new to web development, or just Javascript development, you may find yourself wondering what is the difference between TypeScript and Javascript? In this guide I'll explain exactly what TypeScript is and why it's different from Javascript. If you're looking to start your own TypeScript project, I wrote a guide here on setting up your first TypeScript project.
How is TypeScript different from JavaScript?
When the web started out, JavaScript was a scripting language that allowed us to add interactivity to website. Javascript was famously written in 10 days, so as you might expect it didn't have all the features we have today.
As time went on, Javascript's importance only grew. Frameworks evolved like jQuery, Mootools, and then React, Vue and Svelte. Then, Javascript became a backend language too with Node.JS. As it grew in importance, all the quirks, peculiarities and missing features of Javascript became more noticeable. For programmers coming from strongly typed languages, one of these missing features was a type system.
What are types?
In Javascript, type is dynamic based on how you write your code. This is different from some other languages where you have to mention explicitly the type of everything. In Javascript, it's easier:
let x = 5; // Type is Number
let y = 'string'; // Type is String
let z = {}; // Type is object
This is actually a great feature. It makes Javascript easy entry for developers who want to create something fast. It has drawbacks, though. The major one is that if you work with multiple teams, complex systems where enforcing types is important, or just face a lot of issues because of TypeErrors, it can become a hinderance rather than a net positive for your applications.
TypeScript tries to solve this issue. The only thing it really does is adds types to Javascript, and it means you have to define types of your code more often. Using our previous example, we could define the types of our variables like this:
let x:number = 5; // Type is Number
let y:string = 'string'; // Type is String
let z:object = {}; // Type is object
It doesn't end there, though. For example, writing a simple function in Javascript may look like this:
let myFunction = (x, y) => {
return x + y;
}
Whereas TypeScript lets us define types for all arguments and the return value of the function:
let myFunction = (x:number, y:number):number => {
return x + y;
}
Learning TypeScript is therefore a little different than Javascript. If you're interested, you can learn more about types in TypeScript here.
Features of TypeScript
- It is strongly typed - as mentioned, we have to define types in TypeScript whereas we do not in Javascript.
- It still works like Javascript - all the functions, methods, and everything you're used to still exist in TypeScript. It just has types added on too.
- It has a compile step, and compiles to Javascript - TypeScript can't be run on a browser. Instead, you write your code with types, and then they are compiled to vanilla Javascript without types. That means you know your code is typed properly before you compile it, after which it's just plain Javascript that can run on the web.
Why use TypeScript?
The main reason people and organisations use TypeScript is because it's type safe - you can strongly type all of your code, and ultimately this leads to less bugs and issues further down the line. When the return type of a function, or the input type of a variable is defined, developers can't accidentally write "true" instead of true.
Is TypeScript better than Javascript?
TypeScript is not better than Javascript - it just gives you the ability to define your types in your code. Sometimes, you may not need that, and the main disadvantage to Typescript is the compile time. In Javascript, code is ready to go as soon as you write it, but in TypeScript, it requires you to compile it down to Javascript.
In the future, types may come to Javascript in one form or another, which will potentially remove this compile step. For now though, this takes time and may not be your preferred method of writing code if you don't have to. This is the main benefit of sticking with Javascript, but there are others - for small apps, strongly typing your code may provide no added benefit as well.
Therefore, don't feel like you need to use TypeScript - use whatever makes sense for your product or organisation.
Conclusion
If you are new to TypeScript, I write quite a bit about it here. It's a great language, and provides a lot of safety with regards to types that Javascript does not. TypeScript is not better than Javascript, but it may be more familiar to you if you have come from a strongly typed background. It may also be the preferred option if you work on large products or with many teams. It's important you select the toolset that is applicable to your situation though, but there is no harm in learning TypeScript given its growing popularity.
If you've enjoyed this, you can catch me on twitter here.
Top comments (7)
This is only true If you are using vanilla js. Still, most mordern js frameworks require a transpilation step to backport modern js features.
yeah in Javascript. If you're using another framework on top of Javascript you may also have a build step.
The transpilation is only required if you want/need your code to run on all browser, transpilation backport new js features to those who won't support it.
But any JavaScript can globally be run in any good browser console
Typescript is the tool for huge devs teams to prevent errors and make code more safe at the prod
Typescript does nothing for safety on prod, though. That's the biggest flaw of the whole darn thing: it gives you this very false sense of security that ultimately leads to errors in itself.
Perhaps, but at least you can handle some of it before deploying it to prod
TypeScript is for devs that hate javascript :)