Objects are what you are dealing with working as a JavaScript developer, and needless to say, that holds true for TypeScript as well. TypeScript provides you with multiple ways to define type definitions for object properties. We'll look at a couple of them throughout this post, starting with simple examples and moving on to some advanced type definitions. Using the Keyword type Object properties can be assigned type definitions using the keyword in TypeScript. This is the easiest and preferred method to assign type definitions when dealing with simple objects. Here is an example of an type and an object. type Airplane airplane // Defining Airplane Type
type Airplane = {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
};

// Creating airplane Object
const airplane: Airplane = {
  model: "Airbus A380",
  flightNumber: "A2201",
  timeOfDeparture: new Date(),
  timeOfArrival: new Date(),
}; Nested Objects If your object has a nested object, you can nest the type definitions using the type keyword itself. Here is an example of a nested object called inside the type definition. caterer Airplane type Airplane = {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
  caterer: {
    name: string;
    address: string;
    phone: number;
  };
};

const airplane: Airplane = {
  model: "Airbus A380",
  flightNumber: "A2201",
  timeOfDeparture: new Date(),
  timeOfArrival: new Date(),
  caterer: {
    name: "Special Food Ltd",
    address: "484, Some Street, New York",
    phone: 1452125,
  },
}; Abstracting Nested Objects Into Separate Types If you have large objects defining nested type definitions can become cumbersome. In such a case, you can define a separate type for the nested object. This will also abstract away the type from the type, allowing you to use the type in the other parts of your code. Caterer Caterer Airplane Caterer type Airplane = {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
  caterer: Caterer;
};

const airplane: Airplane = {
  model: "Airbus A380",
  flightNumber: "A2201",
  timeOfDeparture: new Date(),
  timeOfArrival: new Date(),
  caterer: {
    name: "Special Food Ltd",
    address: "484, Some Street, New York",
    phone: 1452125,
  },
}; Using Index Signatures With Nested Objects Index signatures can be used when you are unsure of how many properties an object will have but you are sure of the type of properties of an object. We can define another type called , which can be the details of the passenger traveling on each seat of the type. We can use index signature to assign string type to all seat properties. Seat Airplane type Caterer = {
  name: string;
  address: string;
  phone: number;
};

type Seat = {
  [key: string]: string;
};

type Airplane = {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
  caterer: {
    name: string;
    address: string;
    phone: number;
  };
  seats: Seat[];
};

const airplane: Airplane = {
  model: "Airbus A380",
  flightNumber: "A2201",
  timeOfDeparture: new Date(),
  timeOfArrival: new Date(),
  caterer: {
    name: "Special Food Ltd",
    address: "484, Some Street, New York",
    phone: 1452125,
  },
  seats: [
    {
      name: "Mark Allen",
      number: "A3",
    },
    {
      name: "John Doe",
      number: "B5",
    },
  ],
}; Interfaces to Assign Types to Object Properties If you need to create classes to generate objects, using instead of the type keyword would be a better option. Here is an example of an object created using the class, which extends the interface. interfaces airplane Airplane IAirplane interface IAirplane {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
}

class Airplane implements IAirplane {
  public model = "Airbus A380";
  public flightNumber = "A2201";
  public timeOfArrival = new Date();
  public timeOfDeparture = new Date();
}

const airplane: Airplane = new Airplane(); Nested Objects Using Interfaces Just like we used the keyword, can also be used to strictly type nested objects with classes. type interfaces interface ICaterer {
  name: string;
  address: string;
  phone: number;
}

interface ISeat {
  name: string;
  number: string;
}

interface IAirplane {
  model: string;
  flightNumber: string;
  timeOfDeparture: Date;
  timeOfArrival: Date;
}

class Caterer implements ICaterer {
  public name = "Special Food Ltd";
  public address = "484, Some Street, New York";
  public phone = 1452125;
}

class Seat implements ISeat {
  public name = "John Doe";
  public number = "A3";
}

class Airplane implements IAirplane {
  public model = "Airbus A380";
  public flightNumber = "A2201";
  public timeOfArrival = new Date();
  public timeOfDeparture = new Date();
  public caterer = new Caterer();
  public seats = [new Seat()];
}

const airplane: Airplane = new Airplane(); What Can You Do Next 🙏😊 If you liked the article, consider subscribing to , where I keep posting in-depth tutorials and all edutainment stuff for software developers. You can also follow me on Hashnode; my profile handle - @ . Leave a like if you liked the article; it keeps my motivation high 👍. Cloudaffle, my YouTube Channel Cloudaffle Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

YouTube

How Linux Became So Popular

The Impact of Linux and the GNU Project

Download My JavaScript CheatSheet

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Assign Types To Nested Objects In TypeScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

14 Reasons Why Laravel Is The Best PHP Framework!

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

14 Reasons Why Laravel Is The Best PHP Framework!

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps