Objects are used to store related data using key-value pairs. In TypeScript, you can describe the structure of an object by specifying the names and types of its properties.
An object is a collection of related properties. Each property has a name and a value.
let student = {
name: "Rahul",
age: 20
};
Here, name and age are properties of the
object.
You can explicitly define the types of an object's properties.
let student: {
name: string;
age: number;
} = {
name: "Rahul",
age: 20
};
The name property must contain a string and
age must contain a number.
Each property can have its own type.
let student: {
name: string;
age: number;
isActive: boolean;
} = {
name: "Amit",
age: 21,
isActive: true
};Use the dot operator to access an object's property.
let student: {
name: string;
age: number;
} = {
name: "Rahul",
age: 20
};
console.log(student.name);
console.log(student.age);Output:
Rahul
20If the object is not readonly, its properties can be changed.
let student: {
name: string;
age: number;
} = {
name: "Rahul",
age: 20
};
student.age = 21;
console.log(student.age);The new value must match the property's declared type.
When an object is given an explicit object type, TypeScript checks which properties are allowed.
let student: {
name: string;
age: number;
} = {
name: "Amit",
age: 20
};You should follow the structure defined by the object type.
TypeScript can infer the structure of an object automatically.
let student = {
name: "Rahul",
age: 20
};
TypeScript understands that name is a string and
age is a number.
An object can contain multiple string properties.
let student: {
firstName: string;
lastName: string;
course: string;
} = {
firstName: "Rahul",
lastName: "Kumar",
course: "TypeScript"
};An object can contain multiple numeric properties.
let marks: {
html: number;
css: number;
javascript: number;
} = {
html: 80,
css: 85,
javascript: 90
};Boolean properties are useful for storing states such as active, verified, logged in, or enabled.
let user: {
name: string;
isActive: boolean;
} = {
name: "Amit",
isActive: true
};An object can contain properties with different types.
let student: {
name: string;
age: number;
isPassed: boolean;
} = {
name: "Rahul",
age: 21,
isPassed: true
};An object can contain another object as a property.
let student: {
name: string;
address: {
city: string;
state: string;
}
} = {
name: "Rahul",
address: {
city: "Patna",
state: "Bihar"
}
};Use multiple dot operators to access nested object properties.
console.log(
student.address.city
);
console.log(
student.address.state
);Output:
Patna
BiharAn object property can also contain an array.
let student: {
name: string;
marks: number[];
} = {
name: "Amit",
marks: [
80,
85,
90
]
};An object can contain a function as one of its properties.
let calculator: {
add: (
a: number,
b: number
) => number;
} = {
add: (
a: number,
b: number
) => {
return a + b;
}
};
console.log(
calculator.add(10, 20)
);A function can accept an object with a defined structure.
function displayStudent(
student: {
name: string;
age: number;
}
) {
console.log(student.name);
console.log(student.age);
}
displayStudent({
name: "Rahul",
age: 20
});A function can return an object with a specified structure.
function getStudent(): {
name: string;
age: number;
} {
return {
name: "Amit",
age: 21
};
}
let student = getStudent();
console.log(student.name);
The ? symbol can make an object property optional.
let student: {
name: string;
age?: number;
} = {
name: "Rahul"
};
The age property is optional in this object type.
The readonly keyword prevents a property from being
reassigned after the object has been initialized.
let student: {
readonly id: number;
name: string;
} = {
id: 101,
name: "Rahul"
};
student.name = "Amit";
// Error
// student.id = 102;A student object can combine many different properties.
let student: {
id: number;
name: string;
age: number;
course: string;
isActive: boolean;
} = {
id: 101,
name: "Rahul",
age: 20,
course: "TypeScript",
isActive: true
};Objects are also useful for representing products.
let product: {
id: number;
name: string;
price: number;
available: boolean;
} = {
id: 1,
name: "Laptop",
price: 50000,
available: true
};
console.log(product.name);
console.log(product.price);Objects are commonly used to represent component data in React applications.
const user: {
name: string;
age: number;
} = {
name: "Rahul",
age: 20
};
function App() {
return (
<div>
<h2>
{user.name}
</h2>
<p>
{user.age}
</p>
</div>
);
}React Native applications frequently use objects to store user, product, student, and API data.
const user: {
name: string;
age: number;
} = {
name: "Rahul",
age: 20
};
console.log(user.name);
console.log(user.age);A screen can use an object to store information that needs to be displayed.
const student: {
name: string;
course: string;
marks: number;
} = {
name: "Amit",
course: "React Native",
marks: 85
};The values can then be displayed inside React Native components.
You can create an array containing multiple objects.
let students: {
name: string;
age: number;
}[] = [
{
name: "Amit",
age: 20
},
{
name: "Rahul",
age: 21
},
{
name: "Priya",
age: 19
}
];You can use a loop to access each object in an array.
for (const student of students) {
console.log(
student.name
);
console.log(
student.age
);
}
In React Native, arrays of typed objects are commonly used with
FlatList.
const students: {
id: number;
name: string;
}[] = [
{
id: 1,
name: "Amit"
},
{
id: 2,
name: "Rahul"
}
];This type of structure is useful when displaying lists of records.
API responses commonly contain objects with multiple properties.
let response: {
id: number;
name: string;
email: string;
} = {
id: 101,
name: "Rahul",
email: "rahul@example.com"
};
console.log(response.name);
console.log(response.email);Later, interfaces and type aliases can make these structures easier to reuse.
Mistake 1: Assigning the wrong type to a property.
let student: {
name: string;
age: number;
} = {
name: "Rahul",
age: 20
};
// Error
// student.age = "Twenty";Mistake 2: Using a property that is not part of the defined object structure.
// TypeScript checks the declared structure
// and reports incompatible object properties.Always follow the object structure defined by TypeScript.
| Feature | Example |
|---|---|
| Basic object | { name: string } |
| Multiple properties | { name: string; age: number } |
| Optional property | { age?: number } |
| Readonly property | { readonly id: number } |
| Nested object | { address: { city: string } } |
| Array of objects | { name: string }[] |
| Object access | student.name |
?.readonly.
Question: Which syntax correctly describes an object with a
string name and a number age?