Avoid Cluttering Your Code with Inferable Types in TypeScript

When developers transition from JavaScript to TypeScript, a common practice is to add type annotations to everything. After all, TypeScript is designed to enforce type safety. However, unnecessarily cluttering code with explicit type annotations can make it harder to read and maintain. This guide will explain when to avoid these redundant type declarations.

Type Inference Basics

TypeScript has a powerful type inference engine. This means that the type of a variable is often automatically determined by its assignment. Consider the following example:

// Don’t do this:
let age: number = 30;

// Do this:
let age = 30;

If you hover over age in an IDE like Visual Studio Code, you’ll see that TypeScript has inferred its type as number. The explicit type annotation : number is redundant and just adds noise to the code.

Inferred Types for Complex Objects

TypeScript can infer types for nested objects and complex structures as well:

// Unnecessary type annotation:
const book: {
  title: string;
  author: string;
  published: {
    year: number;
    month: number;
  };
} = {
  title: "The Great Gatsby",
  author: "F. Scott Fitzgerald",
  published: {
    year: 1925,
    month: 4,
  },
};

// Better approach:
const book = {
  title: "The Great Gatsby",
  author: "F. Scott Fitzgerald",
  published: {
    year: 1925,
    month: 4,
  },
};

The type of book is correctly inferred as an object with title, author, and published properties. Adding explicit type annotations here just makes the code more verbose without adding clarity.

Arrays and Functions

Types for arrays and functions can also be inferred effectively:

// Don’t do this:
function getSquares(numbers: number[]): number[] {
  return numbers.map((n) => n * n);
}

// Do this:
function getSquares(numbers: number[]) {
  return numbers.map((n) => n * n);
}

const result = getSquares([1, 2, 3, 4]);
// TypeScript infers result as number[]

Precise Types and Type Safety

TypeScript’s inference can sometimes be more precise than manual annotations. For instance:

const direction: string = "north";
const direction2 = "south";
// ^? TypeScript infers direction2 as ‘“south”’ (a string literal type)

Explicitly declaring direction as string adds noise and reduces type safety since direction2 is inferred to a more specific type.

Avoiding Redundancy in Function Implementations

Over-annotating variables within function bodies can lead to errors when refactoring:

interface Product {
  id: number;
  name: string;
  price: number;
}

// Don’t do this:
function displayProduct(product: Product) {
  const id: number = product.id;
  const name: string = product.name;
  const price: number = product.price;
  console.log(id, name, price);
}

// Better approach:
function displayProduct(product: Product) {
  const { id, name, price } = product;
  console.log(id, name, price);
}

By letting TypeScript infer the types of id, name, and price, the code is cleaner and easier to maintain. If the Product type changes (e.g., id becomes a string), there will be fewer places to update.

When Explicit Annotations Are Helpful

While it’s best to rely on TypeScript’s inference when possible, there are situations where explicit annotations are beneficial:

1. Object Literals for Excess Property Checks:

   interface Car {
     make: string;
     model: string;
     year: number;
   }
   
   const myCar: Car = {
     make: "Tesla",
     model: "Model S",
     year: 2021,
   };

   Annotating myCar as Car enables TypeScript to catch excess or missing properties.

2. Return Types for Public APIs: Explicit return types can prevent implementation changes from unintentionally altering the output type:

   function fetchUserData(userId: number): Promise<User> {
     // Implementation
   }
   

   By specifying the return type as Promise<User>, you ensure that refactoring won’t cause unintended type changes.

Conclusion

Type annotations are essential in TypeScript but should be used judiciously. Overuse can clutter the code and make it harder to read and maintain. Ideal TypeScript code uses type annotations for function signatures and public APIs, while local variable types should generally be inferred. This approach ensures code clarity, maintains type safety, and facilitates easier refactoring.