Type Annotations in TypeScript

A type annotation tells TypeScript what type of value is expected.

let name: string = "Rahul";

Here, string is the type annotation. It tells TypeScript that name should contain text.

The basic syntax is:

let variableName: type = value;

For example:

let age: number = 20;

The colon separates the variable name from its type.

Use string when a variable should contain text.

let studentName: string = "Amit";
let city: string = "Aurangabad";

Both variables are declared as strings.

Use number for numeric values.

let age: number = 21;
let marks: number = 85;
let price: number = 500;

All three variables are expected to contain numbers.

Use boolean for true or false values.

let isStudent: boolean = true;
let isPassed: boolean = false;

If a variable is declared with a type, TypeScript can detect an incompatible assignment.

let age: number = 20;

age = "Twenty";

The second line causes a type error because age is a number.

Type annotations can also be used with const.

const country: string = "India";
const year: number = 2026;

You can specify the type of values that an array should contain.

let marks: number[] = [80, 75, 90, 85];

This means the array is intended to contain numbers.

Another syntax is:

let names: Array<string> = [
    "Amit",
    "Rahul",
    "Priya"
];

A string array can be declared using:

let students: string[] = [
    "Amit",
    "Rahul",
    "Priya"
];

Every element is expected to be a string.

You can also create an array containing boolean values.

let results: boolean[] = [
    true,
    false,
    true
];

Function parameters can also have type annotations.

function greet(name: string) {
    console.log("Hello " + name);
}

The name parameter is expected to be a string.

You can specify types for multiple parameters.

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

Both parameters are expected to be numbers.

You can specify the type of value returned by a function.

function add(
    a: number,
    b: number
): number {

    return a + b;
}

The : number after the parameter list specifies the return type.

A function returning text can use string.

function getMessage(): string {
    return "Hello TypeScript";
}

A function returning true or false can use boolean.

function isAdult(age: number): boolean {
    return age >= 18;
}

If a function does not return a value, you can use the void type.

function showMessage(
    message: string
): void {

    console.log(message);
}

The function performs an action but does not return a value.

You can define the expected structure of an object.

let student: {
    name: string;
    age: number;
} = {
    name: "Rahul",
    age: 20
};

let student: {
    id: number;
    name: string;
    age: number;
    active: boolean;
} = {

    id: 101,
    name: "Amit",
    age: 21,
    active: true

};

Each property has its own type annotation.

An object type can also be used as a function parameter.

function showStudent(
    student: {
        name: string;
        age: number;
    }
): void {

    console.log(student.name);
    console.log(student.age);
}

A tuple allows you to define the types and order of elements.

let student: [string, number] = [
    "Rahul",
    21
];

The first value is a string and the second value is a number.

A union type allows a value to have more than one possible type.

let studentId: number | string;

studentId = 101;
studentId = "ST101";

The | symbol means "or".

A literal type can restrict a value to specific literal values.

let direction: "left" | "right";

direction = "left";
direction = "right";

Only the specified values are allowed.

TypeScript can explicitly work with null.

let value: null = null;

Here the variable is specifically assigned the null value.

You can also explicitly specify the undefined type.

let value: undefined = undefined;

This is useful when you specifically need the value to be undefined.

Type annotations are especially useful when working with data received from an API.

let user: {
    id: number;
    name: string;
    email: string;
} = {
    id: 101,
    name: "Rahul",
    email: "rahul@example.com"
};

The structure of the expected user data is clearly defined.

Type annotations are very useful in React Native development. For example, you can type component data:

interface User {
    id: number;
    name: string;
}

const user: User = {
    id: 101,
    name: "Rahul"
};

Later, these concepts will be used for React Native props, state, navigation, and API responses.

With a type annotation, you explicitly specify the type:

let age: number = 20;

With type inference, TypeScript determines the type automatically:

let age = 20;

Both approaches are useful. Type annotations are helpful when you want to explicitly describe the expected type.

let studentId: number = 101;
let studentName: string = "Amit";
let marks: number = 88;
let passed: boolean = true;

function showStudent(
    id: number,
    name: string,
    marks: number,
    result: boolean
): void {

    console.log("ID:", id);
    console.log("Name:", name);
    console.log("Marks:", marks);
    console.log("Passed:", result);
}

showStudent(
    studentId,
    studentName,
    marks,
    passed
);

This example uses type annotations for variables and function parameters.

Mistake 1: Assigning the wrong type.

let age: number = "Twenty";

Mistake 2: Passing the wrong type to a function.

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

add(10, "20");

Always make sure the value matches the declared type.