Day 3: Type Annotations and Type Inference in TypeScript

Welcome to Day 3 of your TypeScript journey! On Day 2, we explored basic types like string, number, and boolean. Today, we’ll dive into two fundamental concepts that make TypeScript so powerful: Type Annotations and Type Inference. These features help you write type-safe code while keeping it clean and readable. Let’s break them down in a simple, beginner-friendly way.

Why Type Annotations and Type Inference Matter

TypeScript’s core strength lies in its ability to catch errors during development, before your code even runs. But how does it know what types your variables should have? That’s where type annotations and type inference come into play. Together, they ensure your code is predictable, maintainable, and less prone to bugs.

1. Type Annotations

Type annotations are explicit ways to tell TypeScript what type a variable, function parameter, or return value should have. You add them using a colon (:) followed by the type.

Example: Annotating Variables

let name: string = "John";
let age: number = 30;
let isActive: boolean = true;

Here, we’re explicitly telling TypeScript that:

name is a string.
age is a number.
isActive is a boolean.

Example: Annotating Function Parameters and Return Types

function greet(name: string): string {
    return `Hello, ${name}!`;
}

In this example:

The name parameter is annotated as a string.
The function’s return type is annotated as a string.

Why Use Type Annotations?

They make your code more readable and self-documenting.
They help catch errors early, especially in complex functions or large codebases.

2. Type Inference

Type inference is TypeScript’s ability to automatically determine the type of a variable based on its value. This means you don’t always have to explicitly annotate types—TypeScript can figure them out for you.

Example: Type Inference in Action

let name = "John"; // TypeScript infers `name` as a string
let age = 30;       // TypeScript infers `age` as a number
let isActive = true; // TypeScript infers `isActive` as a boolean

Here, TypeScript looks at the values assigned to name, age, and isActive and infers their types automatically.

Example: Type Inference in Functions

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

In this function:

TypeScript infers the return type as number because a + b results in a number.

Why Use Type Inference?

It reduces boilerplate code, making your code cleaner.
It’s especially useful for simple variables and functions where the type is obvious.

When to Use Type Annotations vs Type Inference

While TypeScript’s type inference is powerful, there are times when you should explicitly use type annotations:

When Declaring Variables Without Initial Values

 let message: string;
 message = "Hello, TypeScript!";

When Function Return Types Aren’t Obvious

 function calculateTax(income: number): number {
     // Complex logic here
     return income * 0.2;
 }

When Working with Complex Objects

 let user: { name: string, age: number } = {
     name: "Alice",
     age: 25,
 };

When Type Inference Gets It Wrong
Sometimes, TypeScript might infer a type that’s too broad (e.g., any). In such cases, annotations help clarify your intent.

Putting It All Together

Let’s look at an example that combines type annotations and type inference:

// Type annotation for function parameters and return type
function createUser(name: string, age: number): { name: string, age: number } {
    return { name, age };
}

// Type inference for the returned object
const user = createUser("John", 30);

// Type annotation for a complex object
let settings: { theme: string, notifications: boolean } = {
    theme: "dark",
    notifications: true,
};