How-to: Decide whether to use TypeScript or JavaScript

Photo by Aniket Bhattacharya on Unsplash

Background

It is widely known how JavaScript is a widely used language that runs in web browsers and on the server-side using Node.js.

While JavaScript is a powerful and flexible language, it has some drawbacks, such as weak typing and a lack of compile-time error checking.

TypeScript is a superset of JavaScript that adds optional static typing and other features to address these drawbacks.

In this segment, I will walk us through on when to use TypeScript over JavaScript, with a few code samples.

Advantages of TypeScript

1. Static Typing: TypeScript adds optional static typing to JavaScript, which can help catch errors at compile-time instead of runtime. This can improve code quality and reduce the time spent debugging.

// JavaScript
function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2)); // 3
console.log(sum("1", "2")); // "12" (string concatenation)

// TypeScript
function sum(a: number, b: number): number {
  return a + b;
}

console.log(sum(1, 2)); // 3
console.log(sum("1", "2")); // Error: Argument of type '"1"' is not assignable to parameter of type 'number'.

In this example, the sum() function takes two arguments and returns their sum. In JavaScript, the function works as expected for numbers, but if we pass strings, it concatenates them instead of adding them.

In TypeScript, we add type annotations to the function arguments and return value, which makes the function more robust and less error-prone.

2. Code Readability: TypeScript allows us to define and use custom types, interfaces, and classes, which can improve the readability and maintainability of the code.

// JavaScript
function printPerson(person) {
  console.log(person.name, person.age);
}

printPerson({ name: "Wahab", age: 49}); // Wahab 49
printPerson({ name: "Riya" }); // Riya undefined

// TypeScript
interface Person {
  name: string;
  age: number;
}

function printPerson(person: Person) {
  console.log(person.name, person.age);
}

printPerson({ name: "Wahab", age: 49}); // Wahab 49
printPerson({ name: "Riya" }); // Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

In this example, we define a Person interface in TypeScript, which describes the shape of an object that has a name property of type string and an age property of type number. We then use this interface as the type of the person parameter in the printPerson() function.

This makes the function more readable and self-documenting, and catches errors at compile-time if we pass an object that doesn't match the interface.

3. Tooling Support: TypeScript is supported by many development tools, such as Visual Studio Code, which provide features such as autocompletion, error highlighting, and code navigation.

TypeScript also integrates well with popular libraries and frameworks such as React, Angular, and Vue.js.

// React component in TypeScript
import React, { useState } from "react";

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = ({ name }) => {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1);
  };
  
  return (
    <>
      <h1>Hello, {name}!</h1>
      <p>You clicked {count} times.</p>
      <button onClick={handleClick}>Click me</button>
    </>
  );
};

export default Greeting;

Summary

In summary, TypeScript is a superset of JavaScript that adds optional static typing and other features to address the drawbacks of JavaScript. TypeScript provides advantages such as static typing, code readability, and tooling support.

The decision to use TypeScript over JavaScript depends on the complexity and scale of the project. If the project is small and simple, JavaScript may be sufficient. However, for larger and more complex projects, TypeScript can improve code quality, maintainability, and productivity.

TypeScript is particularly useful in projects with a team of developers, where static typing can prevent errors and make code more predictable and easier to maintain over time.

Additionally, if the project involves integrating with a framework or library that has strong TypeScript support, such as Angular or React, using TypeScript can provide additional benefits.