How to declare and type a nested object in TypeScript

Declare and Type a nested Object in TypeScript

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:

Leave a Reply

Your email address will not be published. Required fields are marked *