TypeScript Type Inference

Introduction

In this chapter, we will explore type inference in TypeScript. Type inference is a powerful feature that allows the TypeScript compiler to automatically determine the type of a variable based on its value. This helps in reducing the amount of explicit type annotations while still maintaining type safety.

Table of Contents

1. Definition
2. How Type Inference Works
3. Type Inference with Variables
4. Type Inference with Functions
5. Contextual Typing
6. Examples and Output
7. Conclusion

Definition

Type inference in TypeScript refers to the compiler's ability to automatically determine the type of a variable, function return type, or function parameter based on the value assigned to it or the context in which it is used. This feature helps in writing cleaner and more concise code while maintaining type safety.

How Type Inference Works

TypeScript uses various strategies to infer types. When you declare a variable and initialize it with a value, TypeScript infers the type of the variable from the value. Similarly, when you return a value from a function, TypeScript infers the return type of the function.

Type Inference with Variables

Example

This example demonstrates how TypeScript infers the type of variables.

let age = 25; // TypeScript infers the type as number
let name = "Ravi"; // TypeScript infers the type as string
let isStudent = true; // TypeScript infers the type as boolean

console.log(`Age: ${age}, Name: ${name}, Is Student: ${isStudent}`);

Output

Age: 25, Name: Ravi, Is Student: true

Type Inference with Functions

Example

This example demonstrates how TypeScript infers the return type of a function.

function add(a: number, b: number) {
  return a + b; // TypeScript infers the return type as number
}

let result = add(5, 10);
console.log(result);

Output

15

Contextual Typing

Contextual typing is a form of type inference where the type of an expression is determined by its context. This often happens in situations like event handlers, where TypeScript infers the type of parameters based on their usage.

Example

This example demonstrates contextual typing with an event handler.

document.addEventListener("click", (event) => {
  console.log(event.clientX, event.clientY); // TypeScript infers the type of event as MouseEvent
});

Explanation

In the above example, TypeScript infers the type of the event parameter as MouseEvent based on the context of the addEventListener function.

Examples and Output

Example 1: Type Inference with Variables

This example shows how TypeScript infers the types of different variables.

TypeScript Code (src/index.ts)

let age = 25; // TypeScript infers the type as number
let name = "Ravi"; // TypeScript infers the type as string
let isStudent = true; // TypeScript infers the type as boolean

console.log(`Age: ${age}, Name: ${name}, Is Student: ${isStudent}`);

Example 2: Type Inference with Functions

This example shows how TypeScript infers the return type of a function.

TypeScript Code (src/index.ts)

function add(a: number, b: number) {
  return a + b; // TypeScript infers the return type as number
}

let result = add(5, 10);
console.log(result);

Example 3: Contextual Typing

This example shows how TypeScript uses contextual typing to infer the type of parameters in an event handler.

TypeScript Code (src/index.ts)

document.addEventListener("click", (event) => {
  console.log(event.clientX, event.clientY); // TypeScript infers the type of event as MouseEvent
});

Compiling to JavaScript

To compile the TypeScript code to JavaScript, run the TypeScript compiler:

tsc src/index.ts

Output in JavaScript (src/index.js)

// Type Inference with Variables
var age = 25; // TypeScript infers the type as number
var name = "Ravi"; // TypeScript infers the type as string
var isStudent = true; // TypeScript infers the type as boolean
console.log("Age: " + age + ", Name: " + name + ", Is Student: " + isStudent);

// Type Inference with Functions
function add(a, b) {
  return a + b; // TypeScript infers the return type as number
}
var result = add(5, 10);
console.log(result);

// Contextual Typing
document.addEventListener("click", function (event) {
  console.log(event.clientX, event.clientY); // TypeScript infers the type of event as MouseEvent
});

Running the JavaScript

To see the output of the compiled JavaScript code, run the JavaScript file using Node.js:

node src/index.js

Conclusion

In this chapter, we covered type inference in TypeScript, including how TypeScript infers types for variables, function return types, and function parameters.