Why You Should Use TypeScript Over JavaScript in 2024

Hope As the year unfolds, it’s a great time to reflect on the technologies we use and how they can be improved. In this article, we’ll explore the reasons why you should consider switching from plain JavaScript to TypeScript for your next project. Over the past two years, I’ve used TypeScript in most of my clients' projects, and it’s been a game-changer. I’m confident that once you learn and start using TypeScript, you’ll find it difficult to go back to plain JavaScript.

If you haven’t heard here is what TypeScript is.

What Exactly is TypeScript?

TypeScript is a strongly typed programming language, that builds on JavaScript, and gives you better tooling. This definition is straight off the TypeScript language website. In simple words:

TypeScript is basically JavaScript code with special syntax for types!

A typical TypeScript file uses the .ts extension, and when the TypeScript compiler runs, it transpiles that code into JavaScript. This means you get the best of both worlds: the enhanced developer experience of TypeScript and the universal runtime compatibility of JavaScript.

Why is TypeScript Becoming More Popular? In recent years, TypeScript has seen significant growth in popularity, especially among professional developers. In fact, in the 2022 StackOverflow Developer Survey, TypeScript was one of the most-wanted programming languages, ranking just behind Rust and Python. Almost 17% of surveyed developers expressed interest in continuing to use TypeScript, showing that the demand for TypeScript skills in the job market is only growing.

This rise in popularity is no coincidence. As the complexity of modern web applications increases, developers are looking for tools that allow them to write safer, more maintainable code. TypeScript provides these benefits and more, making it an excellent choice for projects of all sizes.

Show Me the Code: TypeScript vs. JavaScript!

TypeScript allows you  to add “types” to your JavaScript code, so you can write scalable code for large projects, without having to worry about the.

Let’s look at some simple React code, for a Heading component.

The JavaScript version of the component is shown below:

export const Heading = ({ title, bold }) => {
  return (
    <div>
      {bold ? "Bold Title: " : "Regular Title: "}
      {title}
    </div>
  );
};

The same component, when written in TypeScript takes a different turn as shown below. We are now adding types to each prop that has been passed to the Heading component.

type HeadingProps = {
  title: string;
  bold: boolean;
}

export const Heading = ({ title, bold }: HeadingProps) => {
  return (
    <div>
      {bold ? "Bold Title: " : "Regular Title: "}
      {title}
    </div>
  );
};

In the example above, you can see TypeScript in action. The component Heading accept the props title and bold of type HeadingProps. Anytime we invoke the Heading component we will have to pass to it, all the props with the appropriate types. Your IDE will throw an error, if you either miss a prop or pass a prop of incorrect type as shown below.

You get the idea! It is awesome to get this kind of instant feedback from the IDE, while you are still coding!

Why TypeScript ?

Below is a summary of why TypeScript is preferred these days instead of using plain JavaScript. Let’s touch on each of these points mentioned below:

Catch Problems Early On

With the transition to TypeScript the first thing that you will notice is that you can now catch problems early on. Especially in larger projects, with hundreds of thousands of files, using TypeScript can provide instant feedback and catch problems during the development stages.

The simple code snippet below shows a TypeScript code, that will immediately let you know that there is an error.

let message: string;
message = 123;

Type 'number' is not assignable to type 'string'.ts(2322)

This code shown above, will immediately display an error on the IDE with the above message.

IntelliSense is Accurate

Modern IDEs like VS Code, provides IntelliSense support. This shows you intelligent code completion, hover information and so on, which helps speed up your coding. With VS Code, it provides IntelliSense for individual TypeScript files and TypeScript projects. This is a huge time saver, and improves developer velocity by heaps and bounds.

Easier to Refactor Code

With TypeScript, you would have guessed it by now, it is much easier to refactor code. A single change to an individual file can sometimes affect several hundreds of other files. If you are using plain JavaScript, refactoring large code bases with several hundred files could soon be a very tedious task with limited validation. But with TypeScript, you validate connections between different parts of your projects automatically, and with instant feedback. As a developer, you will feel confident in your code, and save tons of time, since you do not have to validate that you have accidentally broken something! TypeScript does this work for you instead!

Improved Readability, Maintainability, and Testability

Since TypeScript enforces strict type definitions, your code naturally becomes more readable and maintainable. Future developers working on your codebase will appreciate the clear, unambiguous types. Additionally, TypeScript’s strictness makes it easier to write unit tests because you can more confidently predict the behavior of your code.

High Quality Documentation (TSDoc)

In TypeScript projects you can generate high quality documentation using TSDoc. Because everything is typed, the documentation is predictable and can be auto-generated.

You can use plugins like ESLint TS Doc, to provide a rule for validating TypeScript doc comments which confirm to the TSDoc specifications.

An example code that generates TS Doc based on the comments would be structured as follows:

/**
 * Returns the average of two numbers.
 *
 * @remarks
 * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
 *
 * @param x - The first input number
 * @param y - The second input number
 * @returns The arithmetic mean of `x` and `y`
 *
 */
function getAverage(x: number, y: number): number {
  return (x + y) / 2.0;
}

You can try out the TSDoc playground to checkout how TS documentation looks.

Conclusion

Switching from plain JavaScript to TypeScript might seem like a daunting task at first, but the benefits are undeniable. With features like early error detection, improved tooling, and better code maintainability, TypeScript offers a superior development experience. Whether you’re working on a small project or a large-scale application, TypeScript helps you write cleaner, safer, and more scalable code.