Despite their similarities (which are a lot), whether JavaScript (JS) is really better than TypeScript (TS) - or vice-versa - lies in their differences.
This article seeks to explain the current main contrasts between both languages and provides code examples of each. Further, we will explain whether JS and TS are object-oriented programming (OOP) languages and which one a developer should learn.
Finally, we will disclose which is better! As we know, JavaScript is a language that has highly contributed to the web's success. Is it time for TypeScript to take over? Let's find out.
Table of Contents
What is JavaScript?
What is TypeScript
Difference between TypeScript and JavaScript
➤ Definition
➤ Compilation
➤ Typing
➤ Is JavaScript an object-oriented programming (OOP) language?
➤ Is TypeScript an object-oriented programming (OOP) language?
TypeScript vs JavaScript: code examples
Is TypeScript better than JavaScript?
TypeScript vs JavaScript: which one to learn?
Conclusion
What is JavaScript?
JavaScript (JS) is the most popular programming language in the world. It is considered a high-level language that helps to create interactive and dynamic web pages. Together with HTML and CSS, JavaScript is also one of the core technologies for web applications and is highly characterized by its dynamic typing and just-in-time (JIT) compiler.
Plus, it is a multi-paradigm language due to its ability to support functional programming, imperative programming styles, and event-driven programming. JavaScript followed a client-side implementation (when the script runs on the user's browser). However, it also has engines that allow server-side implementations (scripts run on the web server, and the response is customized according to each user's request).
JavaScript started standing out as a server-side technology mainly due to the development and popularity of Node.js. Nonetheless, it is not easy to handle large and complex applications in JavaScript because, as the code grows, it becomes harder to maintain and reuse. Thus, despite the benefits, JavaScript on the server (backend) also made things messier and more complicated to handle. To overcome this struggle, Microsoft introduced TypeScript.
Key takeaways from JavaScript
- Most popular programming language;
- Full-fledged, cross-platform, multi-paradigm, dynamic language;
- Client-side and server-side implementation;
- JIT compilation;
- Compatible with all browsers;
- Developed for small scripts.
What is Typescript?
As mentioned, JavaScript can manage hundreds of code lines, but it was not developed to handle very extensive and complex applications. Therefore, TypeScript (TS) is a superset of JavaScript, fulfilling the same purpose as JavaScript. Yet, it was created to handle and develop larger applications by being strongly typed and by including compile-time error controls.
More precisely, TypeScript is a programming language that supports static and dynamic typing, and further provides inheritance features, classes, visibility scopes, namespaces, interfaces, unions, and other modern features. Additionally, it also enables comments, variables, functions, statements, modules, and expressions.
TS can be used for client-side and server-side applications. Moreover, JavaScript libraries are also compatible with TypeScript.
Key takeaways from TypeScript
- A superset of JavaScript, thus compatible with JS libraries;
- Strongly typed, compiled language, can follow OOP principles;
- Easier to debug;
- Provides static typing;
- Offers full-fledged IDE support;
- Can convert its code to JavaScript code.
Difference between TypeScript and JavaScript
Definition
The first difference worth mentioning is that while JavaScript is a scripting language that helps create interactive and dynamic web pages, TypeScript is a strongly typed superset of JavaScript.
In sum, TypeScript is JavaScript with additional features developed to overcome JavaScript setbacks, especially when it comes to static typing and handling code complexity.
Compilation
On the one hand, there is no need to compile when using JavaScript. Since it is an interpreted language, errors can only be found during run-time. In other words, it first needs to run to be tested and considered valid or not. Consequently, it may take a lot of time to find bugs and errors in the code.
On the other hand, TypeScript has a compile-time error feature that, as the name indicates, compiles the code and checks for compilation errors that may be found in the syntax. This feature can save developers valuable time before running the script. Further, it also avoids some errors from going to production, so it helps the business as well, not only the developers.
Typing
Javascript has dynamic typing (i.e., a variable can now be an integer and later on a string). This makes it hard to know how to handle what is inside a specific variable. Moreover, it does not provide static typing. Static typing means that the developer declares the type of data that a variable can have. For example, if 'x' was declared to point only to integers, the compiler gives an error once you to to put a string in there. Contrarily to JS, TypeScript is strongly typed and enables both static and dynamic typing (it's optional).
Static typing is probably the main advantage of using TypeScript. It
allows the developer to check type accuracy during compile time. For example, JavaScript provides language primitives like string and number, but it does not check that the developer has consistently assigned these. TypeScript does.
Further, using TS static typing in modern development environments (e.g., VS Code) can offer additional information and correct suggestions about the developer's code, contributing to better documentation (which other developers also appreciate). Code navigation and refactoring are also available features that can help the developer keep track of where specific functions and declarations are, and so on. Plus, as mentioned, in general, TS makes it easier to catch mistakes and bugs.
Is JavaScript an object-oriented programming (OOP) language?
ECMAScript is a standard for scripting languages; it provides rules, guidelines, and other details describing what a scripting language should entail. JavaScript is a scripting language that conforms with ECMAScript specifications. Those specifications can change, and new ones can be introduced; hence, there are several ECMAScript versions. One of the versions that introduced the most significant modifications was ECMAScript 6 (also known as ES6 or ECMAScript 2015). This version introduced modules, classes, arrow functions, enhanced object properties, and other exciting features.
Upon JavaScript's release of ES6, the concept of classes was indeed introduced. However, this is a syntax feature for JavaScript's prototypal inheritance. JS is prototype-based, not class-based. Hence, JavaScript is not considered a pure object-oriented programming language, despite the ability to follow some object-oriented programming principles.
Is TypeScript an object-oriented programming (OOP) language?
The answer to this question is not that straightforward. On the one hand, TypeScript has classes and other features that allow the developer to follow OOP principles and techniques.
On the other hand, it is not an opinionated language, meaning that it does not "force" the developer to follow object-oriented principles, like certain languages do (e.g., Java and C#). Therefore, TS is usually not considered a pure object-oriented programming language.
In fact, instead of object-oriented code, in TypeScript, the developer can also opt for imperative or functional code. Consequently, as mentioned before, both JavaScript and TypeScript are multi-paradigm languages.
TypeScript vs JavaScript: code examples
JavaScript code examples
const mars = {
name: "Mars",
gravity: 3.721
};
mars.mass; // returns undefined
function weight(mass, gravity) {
return mass * gravity;
}
TypeScript code: explicit types
// Explicit Types
let destination = "Mars"; // it's the same as let destination: string but TS infers by itself
TypeScript code: using enums
// We can use enums
enum Professions { Astronaut, RocketScientist, Mechanic }
TypeScript compiled to JavaScript: using enums
// We can use enums
var Professions;
(function (Professions) {
Professions[Professions["Astronaut"] = 0] = "Astronaut";
Professions[Professions["RocketScientist"] = 1] = "RocketScientist";
Professions[Professions["Mechanic"] = 2] = "Mechanic";
})(Professions || (Professions = {}));
TypeScript code: using type aliases
// We can also use type aliases
type Person =
{ type: Professions.Astronaut, name: string, isAtSpace: boolean} |
{ type: Professions.RocketScientist, name: string }
TypeScript code: using interfaces
interface Planet {
name: string;
gravity: number;
asteroids?: string[] | string; // optional property (?) and narrowing where we can assign more than one type
}
const mars: Planet = {
name: "Mars",
gravity: 3.721
};
mars.mass; // throw an error: Property 'mass' does not exist on type '{ name: string; gravity: number }'.
TypeScript code: using the Parameter type annotation
// Parameter type annotation
function weight(mass: number, planet: Planet) {
return mass * planet.gravity;
}
function printAsteroids(planet: Planet) {
if (Array.isArray(planet.asteroids)) {
console.log("Asteroids: " + planet.asteroids.join(", "));
} else {
console.log("Asteroids: " + planet.asteroids);
}
}
Is TypeScript better than JavaScript?
As we can observe in the below image, JavaScript has been the number one programming language for years, but TypeScript's popularity growth since 2017 is also notorious.
After looking at the main differences between both languages, it seems like it will not take long until TypeScript catches up with JavaScript, but is it actually better than JS?
Well, the size of the project is an important variable to take into consideration. For smaller projects, TypeScript does not really stand out and may not be worth the effort. In this case, JavaScript might be more advantageous since it runs everywhere (cross-platform) and is very lightweight. In fact, one of the TypeScrit disadvantages, compared with JavaScript, is that it does not run on every browser, meaning that the TypeScript compiler or the Babel plugin must be used to transform TS code into plain JS, making it understandable for all browsers.
Plus, considering that it is not strongly typed, JS can also enable faster coding, despite not being very suitable for larger and more complex applications. Furthermore, TypeScript takes some time and CPU resources to compile code, and, unlike JavaScript, it does not demonstrate the changes in the browser immediately (it takes a few seconds).
Nonetheless, as we have explained throughout this article, it seems pretty clear that TypeScript is the preferred choice for moderate and larger projects. In fact, it was designed explicitly for those projects.
First, in TypeScript is easier to refactor code. Second, TS relies more on explicit types, enabling developers and teams to understand better how the different parts interact. Last but not least, TypeScript identifies bugs and other errors by compile-time checking. These features can improve efficiency and organization when working in large-scale systems.
Also, TypeScript is very similar to JavaScript and can use all the libraries, tools, and frameworks that JS has, so it is definitely worth it to give it a try on TS when it comes to more complex projects.
TypeScript vs JavaScript: which one to learn?
To learn TypeScript, developers must first learn JavaScript. The more a developer knows about JavaScript, the easier it will be to learn TypeScript since both languages share the same syntax as well as the same run-time behavior (except the fact that TS has a compile-time checker).
As the most popular language, JavaScript has a lot of available resources and a massive community. In most cases, TypeScript developers can also benefit from those resources since the way tasks are executed will be the same.
Conclusion
JavaScript is an incredible language; otherwise, it would not have been the most popular one for so many years. However, that does not mean it is perfect (does the perfect programming language even exist?). When it comes to handling larger projects, things can get messy and confusing in JavaScript. Therefore, Microsoft developed TypeScript.
TypeScript is pretty much JavaScript plus the ability to scale. Their main difference is that TypeScript is strongly typed, and JavaScript is not. Moreover, unlike JS, TS was designed to handle larger projects, and the reason for that lies in these three main aspects:
- It is easier to refactor code;
- Identifies bugs and mistakes by compile-time checking;
- Explicit type.
Is one better than the other? Yes and no. For smaller projects, the effort of using TypeScript does not usually pay off; thus, JavaScript is probably better. For larger projects, yes, TypeScript is better and more efficient.
