Explain about noImplicitAny in TypeScript

TypeScript is a popular typed superset of JavaScript that compiles down to plain JavaScript. It offers numerous features to improve the overall developer experience, such as static typing, interfaces, and namespaces. One key feature in TypeScript is the noImplicitAny compiler option. In this article, we will explore noImplicitAny, its benefits and drawbacks, and two different approaches to deal with it in your TypeScript code.

Approach 1: Explicit Type Annotations

This approach involves adding type annotations to every variable and function parameter, ensuring that the compiler knows the expected types.

Adding Type Annotations

function add(a: number, b: number): number {
   return a + b;
}

In this example, the type annotations: number make it clear that both a and b should be numbers, and the function should return a number.

Handling Third-Party Libraries

For third-party libraries without type annotations, you can install and use the corresponding @types package or create your own type declaration file.

Approach 2: Implicit Type Inference

TypeScript's type inference system can often deduce the correct types without explicit annotations.

TypeScript's Type Inference

let myNumber = 5;

In this example, TypeScript automatically infers that myNumber is of type number because it is assigned the value 5.

Example 1: Using Explicit Type Annotations

In this example, we use explicit type annotations to define the User interface and the getUserInfo function. The code is clear, and it ensures the proper types are used.

interface User {
   id: number;
   name: string;
   email: string;
}
function getUserInfo(user: User): string {
   return `ID: ${user.id}, Name: ${user.name}, Email: ${user.email}`;
}
const user: User = {
   id: 1,
   name: "John Doe",
   email: "john.doe@example.com",
};
console.log(getUserInfo(user));

On compiling, it will generate the following JavaScript code −

function getUserInfo(user) {
   return "ID: ".concat(user.id, ", Name: ").concat(user.name, ", Email: ").concat(user.email);
}
var user = {
   id: 1,
   name: "John Doe",
   email: "john.doe@example.com"
};
console.log(getUserInfo(user));

Output

The above code will produce the following output −

ID: 1, Name: John Doe, Email: john.doe@example.com

Example 2: Relying on Type Inference

In this example, we rely on TypeScript's type inference to understand the shape of the users array and the return type of the findUser function. It keeps the code concise while maintaining type safety.

const users = [
   {
      id: 1,
      name: "John Doe",
      email: "john.doe@example.com",
   },
   {
      id: 2,
      name: "Jane Doe",
      email: "jane.doe@example.com",
   },
];

function findUser(id: number) {
   return users.find(user => user.id === id);
}

const user = findUser(1);
console.log(user);

On compiling, it will generate the following JavaScript code −

var users = [
   {
      id: 1,
      name: "John Doe",
      email: "john.doe@example.com"
   },
   {
      id: 2,
      name: "Jane Doe",
      email: "jane.doe@example.com"
   },
];
function findUser(id) {
   return users.find(function (user) { return user.id === id; });
}
var user = findUser(1);
console.log(user);

Output

The above code will produce the following output −

{ id: 1, name: 'John Doe', email: 'john.doe@example.com' }

Conclusion

The noImplicitAny option in TypeScript can help developers write safer and more readable code. However, it may also introduce verbosity and slow down development. By understanding the trade-offs and knowing when to use explicit type annotations or rely on type inference, you can strike the right balance and create clean, maintainable TypeScript code.