TypeScript vs JavaScript

Introduction

Today we will cover a wide, and hot topic: TypeScript vs JavaScript. 

Should they really be compared? This question always arises when I consider writing technology comparison. But the answer is a clear yes! Even though TypeScript is a superset of JavaScript, meaning they share a lot in common, comparing them is valuable. We’ll explore the key differences to help you choose the right language for your project.

But before we go any further, please note:
Since TypeScript is designed to be a superset of JavaScript, and any valid JavaScript code is also valid TypeScript code. This design principle allows JavaScript code to be used within TypeScript files without modification, leveraging TypeScript’s benefits, such as static typing and advanced object-oriented features, while maintaining full compatibility with existing JavaScript codebases. The TypeScript compiler transpiles TypeScript code, including any embedded JavaScript, into plain JavaScript that can run in any JavaScript engine or browser. This ensures that TypeScript enhances JavaScript development without sacrificing the ubiquity and flexibility of JavaScript.

So, we will start simply: 

What is JavaScript? 

JavaScript (JS) is a ubiquitous scripting language in the web development world. Alongside HTML and CSS, it forms the core triad for building dynamic and interactive web pages. JavaScript empowers developers to create features like real-time updates, interactive maps, and even animated graphics. Originally focused on client-side scripting, it has grown into a versatile language with Node.js enabling server-side development as well. Its ease of use and prevalence across web development stacks solidify its position as a fundamental tool for web developers, even with newer languages like TypeScript arising to offer supersets with features like static typing.

What is TypeScript? 

TypeScript is a superset of JavaScript, designed to add static typing to the language, which helps catch errors early in the development process and enhances code readability and maintainability. By introducing types, interfaces, and enums, among other features, TypeScript allows developers to write more robust and error-resistant code, which is particularly beneficial for large-scale applications. It compiles down to plain JavaScript, ensuring compatibility with any browser, host, or operating system, and can be adopted incrementally, making it a flexible choice for projects already using JavaScript. Despite the additional layer of complexity it introduces, TypeScript’s tooling support and integration with modern development environments have made it increasingly popular among developers seeking to leverage the dynamic nature of JavaScript with the benefits of a statically-typed language.

I’m a big fan of TypeScript! It really cuts down on the bugs, which is a lifesaver when we’re pushing new features. And refactoring is so much smoother—it’s like the code almost updates itself!

Rafał Dabrowski, Senior React Developer at Pagepro

Core differences between JavaScript vs TypeScript

I know that’s exactly why you’re here. But to be honest, the differences here are the additional features and tools that TypeScript brings to the table, enhancing and extending the functionality of JavaScript. So the real question is: How does TypeScript improve developers’ efficiency? 

The Key Difference – Typing System

The primary difference between Typescript and Javascript lies in their typing systems. And it’s the one that made most developers move from plain JavaScript to TypeScript. TypeScript introduces static typing, where type checking occurs at compile-time, allowing developers to catch and correct errors before runtime. Of course, it greatly enhances error detection but also significantly improves developer tooling support, providing features such as better code completion, navigation, and refactoring capabilities. TypeScript’s static typing is designed to catch errors during development, promoting early detection of potential issues. 

Static typing offers significant benefits for developer productivity:

Early Error Detection

TypeScript performs type checking at compile time. This means errors related to mismatched data types or incorrect function arguments are caught early in the development process, saving developers time debugging runtime errors.

Code example – TypeScript 

let username: string = "John Doe";
let age: number = 30;

Code example – JavaScript 

let username = "John Doe"; // Type is inferred at runtime
let age = 30; // Type is inferred at runtime

TypeScript gives you the option to specify what type of data (e.g., text, number) each variable should hold. This is known as “type annotation.” In this example, the username is explicitly marked to hold text (string), and the age is marked to hold a number. It helps catch errors early. For instance, if someone accidentally tries to assign a number to a username, TypeScript would flag it as an error before the code is even run. 

JavaScript does not allow you to explicitly state what type of data a variable should hold. It’s inferred when the code runs. As a result, errors related to unexpected data types might only be discovered when the code is running, potentially leading to bugs that are harder to trace.

I like to think that TS is the shortcut for The Sentry, because it guards the code against errors.

Arkadiusz Kruszewski, Developer at Pagepro

Improved Code Completion and Navigation: 

IDEs and code editors that support TypeScript can leverage type annotations to provide more intelligent code completion suggestions and navigation features. This allows developers to write code faster and with fewer errors.

Better Refactoring Support: 

Because TypeScript understands the types involved in your code, it can provide more robust refactoring capabilities. Developers can safely rename variables, functions, and classes with greater confidence that unintended side effects won’t be introduced.

More advanced Object-Oriented Features in TypeScript

Both JavaScript and TypeScript support class-based syntax, but TypeScript extends this feature with more advanced object-oriented capabilities. These additions provide a stricter and more structured approach to object-oriented programming, making the code easier to manage and more predictable, particularly in large-scale projects.

Interfaces and Type Checking:

TypeScript introduces interfaces as a way to define contracts within your code and with external code as well. Interfaces in TypeScript are a powerful way to define the shape of objects, ensuring that they meet a specific contract, which is great for ensuring consistency and predictability in large codebases.

Example: TypeScript’s Interfaces let you define a structure for objects. Here’s an example:

Code in TypeScript:

interface User {
  name: string;
  age: number;
}

const user: User = { name: "John Doe", age: 30 };

Code in Javascript:

const user = { name: "John Doe", age: 30 }; // No explicit structure

Interfaces let you define a structure for objects. Here, the User interface specifies that any user object should have a name (text) and an age (number). This ensures that any user object adheres to this structure, making the code more predictable and easier to debug. In JavaScript, the structure of objects is flexible, which offers freedom but can lead to inconsistencies, especially in larger projects.

Richer Access Modifiers:

TypeScript supports access modifiers such as public, private, and protected, which help manage object properties and method visibility within classes. This is a significant enhancement over JavaScript, which only supports this level of encapsulation using closures or Symbol keys as of ES6.

Abstract Classes and Methods

TypeScript allows the use of abstract classes and methods, which specify a base class that cannot be instantiated on its own but can be extended. This feature helps create a clear and enforced structure of code inheritance, which is particularly useful in complex applications where maintaining a certain hierarchy of components is necessary.

Read-Only Properties

TypeScript provides readonly properties that must be initialized at their declaration or in the constructor of the class, ensuring that they can’t be changed later. This feature is useful for defining properties that should not be modified after creation, adding an additional layer of security and stability to applications.

Parameter Properties

In TypeScript, you can also use parameter properties to quickly create and initialize a member in your class, streamlining class definitions by allowing you to declare and initialize members directly in the constructor parameters.

Generics

Generics available in TypeScript provide a way to create reusable components that can work over a variety of types rather than a single one. This adds a significant level of flexibility and type safety to functions, classes, and interfaces. Generics allow for the creation of components that can interact with any type securely, reducing bugs and enhancing the developer’s ability to work with abstract and specific types dynamically.

Code Example in TypeScript: 

function identity<Type>(arg: Type): Type {
  return arg;
}
let output = identity<string>("myString");

JavaScript Code Example:

javascript
Copy code
function identity(arg) {
  return arg;
}
let output = identity("myString"); // Type is inferred at runtime

TypeScript’s “generics” allow functions to work with any data type while still maintaining type safety. In this example, the identity function can return any type passed to it, but it’s explicitly used with a string here. JavaScript functions can inherently work with any type of data because the language is dynamically typed. However, there’s no way to ensure type safety upfront, which can lead to runtime errors if the wrong type of data is passed around.

JavaScript and TypeScript – Practical Development Considerations

Learning Curve in JavaScript vs TypeScript

JavaScript is known for a little gentler learning curve, especially for beginners. TypeScript introduces static typing, which adds an initial learning hurdle for those unfamiliar with the concept. This might involve understanding concepts like interfaces, types, and generics. And of course, once you know JavaScript, learning TypeScript won’t be easy, but you would have to learn topics like:

• Types: You’ll learn how to define types for variables, functions, and objects. This can involve understanding different data types like strings, numbers, and booleans, as well as more complex types like interfaces and generics.
• Type Annotations: You’ll write annotations throughout your code to specify the types of data your variables, functions, and arguments can hold. This helps the compiler identify potential errors early on.
• Type Checking: TypeScript comes with a type checker that analyzes your code and flags any inconsistencies between your type annotations and the actual data being used. This helps catch errors before you even run your code.

Tooling and Ecosystem

JavaScript has been the most popular web technology for years, so its ecosystem is huge, and there are many tools and JavaScript libraries available. And because of TypeScript nature, you can leverage many tools available for JavaScript! A significant advantage of TypeScript is its smooth integration with the existing JavaScript ecosystem. Here’s a breakdown:

• Most code editors and IDEs that support JavaScript also extend their functionality to TypeScript. Popular options like Visual Studio Code, Sublime Text, and Atom provide features like syntax highlighting, autocompletion, and code formatting specifically for TypeScript. Many even offer extensions that further enhance the TypeScript development experience.
• The TypeScript compiler itself is designed to work alongside existing JavaScript tooling. Many code editors and IDEs integrate the compiler seamlessly, allowing you to write TypeScript code and have it automatically compiled to JavaScript for execution.
• Popular JavaScript testing frameworks like Jest and Mocha work equally well with TypeScript code. You can write unit and integration tests for your TypeScript applications using the same tools and techniques you would for JavaScript.

Examples of Shared Tools between JavaScript and TypeScript:

Here are some specific examples of JavaScript tools that you can use directly with TypeScript:

• Linters: Code linters like ESLint (with the ESLint TypeScript plugin) can be used to enforce coding style guidelines and catch potential errors. These tools can help maintain consistency and quality in your TypeScript codebase.
• Task Runners: Tools like Gulp or Grunt can be used to automate repetitive tasks in your development workflow. These tools can be configured to handle tasks like compiling TypeScript code, running tests, and bundling your application for deployment.
• Build Tools: Build tools like Webpack or Parcel can be used to bundle your TypeScript code along with other dependencies into a single file that can be easily loaded in a browser. These tools can optimize your code for production use and streamline the deployment process.

Community and Adoption

JavaScript is one of the most popular programming languages worldwide. For years it has kept the first place in the StackOverflow Survey as the most popular and widest adopted “Programming, scripting, and markup languages”.

JavaScript language has a vast and mature developer community, one of the largest in the programming world. This translates to a wealth of resources that boasts JavaScript features, including tutorials, libraries, frameworks, and forums. Developers can easily find solutions to challenges and leverage established best practices. JavaScript is the undisputed king of web development, with near-universal adoption for front-end scripting. Its ubiquity and browser compatibility make it an essential skill for web developers.

TypeScript may brag about the rapidly growing, fueled by its increasing popularity community. Developers can find helpful resources, libraries, and frameworks specifically designed for the TypeScript project. Driven by its ability to strengthen and expand features of Javascript, TypeScript adoption is steadily increasing. The familiarity it offers to developers from class-based object-oriented languages like Java or C# additionally makes it an attractive choice.

It’s important to understand that TypeScript isn’t intended as a replacement for JavaScript. Instead, it’s an optional superset that extends JavaScript’s capabilities with features like static typing. Developers can choose to leverage TypeScript’s strengths for specific parts of their codebase while still utilizing plain JavaScript where appropriate. This flexibility allows both languages to coexist and thrive within the web development landscape.

Wrap Up 

Today we explored the key differences between JavaScript and TypeScript, two giants in web development. While JavaScript reigns supreme with its dynamic typing and vast ecosystem, TypeScript emerges as a compelling choice with its static typing and developer-friendly features.

At Pagepro, we wholeheartedly embrace TypeScript. We’ve witnessed a positive impact on developer productivity thanks to reduced errors, enhanced maintainability, and smoother refactoring. And we find it valuable even for smaller projects, where the potential for type-related issues exists nonetheless. But of course, we remember that without JavaScript, we won’t have TypeScript 😉 

FAQ

Is TypeScript as fast as JavaScript?

In terms of runtime performance, TypeScript and JavaScript are essentially equivalent because TypeScript is transpiled to JavaScript before execution. Therefore, the performance of TypeScript-generated JavaScript code is comparable to that of an equivalent JavaScript codebase. However, the development process may be faster with TypeScript due to its tooling and error detection at compile-time, although the initial setup and compilation step can add overhead​.

Is TypeScript better than JavaScript?

For us, at Pagepro the answer is simple – yes, TyperScript is better than JavaScript. It offers additional features like static typing and object-oriented programming elements, which usually lead to better maintainability, easier error detection, and better developer tooling support. We know it’s built on top of JavaScript and won’t ever say JS is bad – TS is just more useful and cut the time spent on bug fixing.

Understand the synergy between React Apollo and TypeScript in modern web development.