To declare and type a nested object in TypeScript, you can declare a new type by using interface or typing alias and then setting it to the nested object. So how to do it? Let’s go into detail now.
Declare and type a nested object in TypeScript
Use interface
You can use the interface to declare a type that has an object and then set it to property in another object to create a nested object.
Example:
// Create an interface
interface persondetail {
name: string;
age: number;
id: number;
address: string;
}
// Use the already interface to type to property
interface user {
userName: string,
infor: persondetail
}
const person1: user = {
userName: "Tn123",
infor: {
name: "Tommy",
age: 25,
id: 1,
address: "England"
}
};
console.log(person1);Output:
[LOG]: {
"userName": "Tn123",
"infor": {
"name": "Tommy",
"age": 25,
"id": 1,
"address": "England"
}
}Or you can use the interface to create a type with a nested object.
Example:
// Create an interface that has nest object
interface user {
userName: string;
infor: {
name: string;
age: number;
id: number;
address: string
};
}
const person1: user = {
userName: "Tn123",
infor: {
name: "Tommy",
age: 25,
id: 1,
address: "England"
},
};
console.log(person1);Output:
[LOG]: {
"userName": "Tn123",
"infor": {
"name": "Tommy",
"age": 25,
"id": 1,
"address": "England"
}
}With aliases type
The aliases type is very helpful to you when you want to reuse some common type in a project.
Example:
// Create an aliases type that has a nest object
type user = {
userName: string;
infor: {
name: string;
age: number;
id: number;
address: string
};
};
const person1: user = {
userName: "Tn123",
infor: {
name: "Tommy",
age: 25,
id: 1,
address: "England"
}
};
console.log(person1);Output:
[LOG]: {
"userName": "Tn123",
"infor": {
"name": "Tommy",
"age": 25,
"id": 1,
"address": "England"
}
}You can set some properties inside the nested object to optional by the ‘?’ operator.
Example:
// Create an interface that has a nest object
type user = {
userName: string;
infor: {
name: string;
age: number;
id: number;
// Mard address property as optional
address?: string;
};
};
const person1: user = {
userName: "Tn123",
infor: {
name: "Tommy",
age: 25,
id: 1
}
};
console.log(person1);Output:
[LOG]: {
"userName": "Tn123",
"infor": {
"name": "Tommy",
"age": 25,
"id": 1
}
}Here I mark the address property as optional so that I don’t need to set a value for it.
To access the property in the nested object, you can call it through the parent object.
Example:
// Create an interface that has a nest object
type user = {
userName: string;
infor: {
name: string;
age: number;
id: number;
address: string
};
};
const person1: user = {
userName: "Tn123",
infor: {
name: "Tommy",
age: 25,
id: 1,
address: "England"
}
};
// Change value of address property
person1.infor.address = "United State";
console.log(person1);Output:
[LOG]: {
"userName": "Tn123",
"infor": {
"name": "Tommy",
"age": 25,
"id": 1,
"address": "United State"
}
}Summary
In this article, I showed you how to declare and type a nested object in TypeScript. I show the way to do it with interface or aliases type. I will also show you how to access the nested property. Hope it is helpful to you. Thanks for reading!
Maybe you are interested:
- Initialize a typed, empty Object using an Interface in TS
- Initialize Typed variable to Empty Object in TypeScript
- Declare a function with an Object return type in TypeScript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm