Object Type Annotations in TypeScript

An object type annotation describes the properties that an object should contain.

let student: {
    name: string;
    age: number;
};

Here, name must be a string and age must be a number.

We can declare the object type and assign values to it.

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

console.log(student);

An object property can be declared as a string.

let user: {
    name: string;
} = {
    name: "Rahul"
};

The name property must contain a string value.

An object can contain number properties.

let student: {
    age: number;
} = {
    age: 21
};

The age property must contain a number.

Boolean properties can contain true or false.

let student: {
    active: boolean;
} = {
    active: true
};

An object type can contain multiple properties.

let student: {
    name: string;
    age: number;
    active: boolean;
} = {
    name: "Amit",
    age: 20,
    active: true
};

Object properties can be accessed using dot notation.

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

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

Properties can be changed as long as the new value matches the declared type.

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

student.name = "Rahul";
student.age = 21;

An object property can also be an array.

let student: {
    name: string;
    marks: number[];
} = {
    name: "Amit",
    marks: [80, 75, 90]
};

console.log(student.marks);

A string array can be used as an object property.

let user: {
    name: string;
    skills: string[];
} = {
    name: "Rahul",
    skills: [
        "HTML",
        "CSS",
        "TypeScript"
    ]
};

An object can contain another object as a property.

let student: {
    name: string;
    address: {
        city: string;
        pin: number;
    };
} = {
    name: "Amit",
    address: {
        city: "Aurangabad",
        pin: 824101
    }
};

Nested properties can be accessed using multiple dots.

console.log(
    student.address.city
);

console.log(
    student.address.pin
);

An object property can use a union type.

let user: {
    id: number | string;
    name: string;
} = {
    id: 101,
    name: "Amit"
};

user.id = "ST101";

The id property can contain either a number or a string.

The any type allows a property to contain different types of values.

let data: {
    value: any;
} = {
    value: 100
};

data.value = "Hello";
data.value = true;

Although possible, using any should be limited when type safety is important.

A property can be made optional using ?.

let student: {
    name: string;
    age?: number;
} = {
    name: "Amit"
};

The age property does not have to be provided.

Required properties must be present, while optional properties may be omitted.

let user: {
    name: string;
    email: string;
    phone?: string;
} = {
    name: "Amit",
    email: "amit@example.com"
};

Here, name and email are required, while phone is optional.

Object type annotations can be used for function parameters.

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

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

showStudent({
    name: "Rahul",
    age: 21
});

A function can return an object with a defined structure.

function getStudent(): {
    name: string;
    age: number;
} {

    return {
        name: "Amit",
        age: 20
    };
}

console.log(
    getStudent()
);

An object can contain a function as one of its properties.

let user: {
    name: string;
    greet: () => void;
} = {
    name: "Amit",

    greet: () => {
        console.log("Hello");
    }
};

user.greet();

An object property can contain a function that accepts parameters.

let calculator: {
    add: (
        a: number,
        b: number
    ) => number;
} = {

    add: (
        a,
        b
    ) => a + b

};

console.log(
    calculator.add(10, 20)
);

An object property can use built-in TypeScript types such as Date.

let student: {
    name: string;
    admissionDate: Date;
} = {
    name: "Amit",
    admissionDate: new Date()
};

console.log(
    student.admissionDate
);

Object type annotations are useful when working with structured data in React.

type User = {
    name: string;
    age: number;
};

const user: User = {
    name: "Amit",
    age: 20
};

This structure can later be used for component props.

React Native applications commonly work with objects representing users, products, API data, and application state.

const user: {
    name: string;
    email: string;
} = {
    name: "Rahul",
    email: "rahul@example.com"
};

Type annotations help keep this data structure predictable.

Object annotations can describe data received from an API.

const product: {
    id: number;
    title: string;
    price: number;
} = {
    id: 101,
    title: "Mobile Phone",
    price: 15000
};

console.log(
    product.title
);

We can define an array containing objects with a specific structure.

let students: {
    name: string;
    age: number;
}[] = [

    {
        name: "Amit",
        age: 20
    },

    {
        name: "Rahul",
        age: 21
    }

];

console.log(
    students[0].name
);

A common mistake is assigning a value that does not match the declared property type.

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

The following would be incorrect:

// Incorrect

// student.age = "Twenty";

The age property was declared as a number.

When an object is checked against an explicitly written object type, TypeScript can detect properties that are not part of the expected structure in certain contexts.

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

Keeping the object structure clear makes the code easier to understand and maintain.

Object type annotations are useful when:

• Creating structured application data.
• Defining function parameters.
• Defining function return values.
• Working with API responses.
• Creating arrays of objects.
• Working with React props and state.
• Working with React Native application data.

Here is a complete student object example using multiple object properties.

let student: {
    id: number;
    name: string;
    age: number;
    course: string;
    marks: number[];
    active: boolean;
} = {

    id: 101,

    name: "Amit",

    age: 20,

    course: "TypeScript",

    marks: [
        80,
        75,
        90
    ],

    active: true
};

console.log(
    student.name
);

console.log(
    student.marks
);

console.log(
    student.active
);

Object type annotations define the expected structure of an object in TypeScript.

let student: {
    name: string;
    age: number;
    course: string;
} = {

    name: "Amit",

    age: 20,

    course: "TypeScript"

};

They make object-based code safer, clearer, and easier to maintain.