Назначение типов вложенным объектам в TypeScript
javascript typescript javascript-tutorial typescript-tutorial

Назначение типов вложенным объектам в TypeScript

3 ноября 2022 г.

Объекты — это то, с чем вы имеете дело, работая разработчиком JavaScript, и, разумеется, это справедливо и для TypeScript. TypeScript предоставляет вам несколько способов определения определений типов для свойств объектов. В этой статье мы рассмотрим несколько из них, начиная с простых примеров и переходя к некоторым расширенным определениям типов.

Использование ключевого слова type

Свойствам объекта можно присвоить определения типа с помощью ключевого слова type в TypeScript. Это самый простой и предпочтительный метод присвоения определений типов при работе с простыми объектами. Вот пример типа 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(),
};

Вложенные объекты

Если ваш объект имеет вложенный объект, вы можете вложить определения типов, используя само ключевое слово type. Вот пример вложенного объекта с именем 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,
  },
};

Абстрагирование вложенных объектов в отдельные типы

Если у вас есть большие объекты, определение вложенных типов может стать громоздким. В таком случае вы можете определить отдельный тип Caterer для вложенного объекта. Это также абстрагирует тип Caterer от типа Airplane, что позволит вам использовать тип Caterer в других частях вашего кода.< /p>

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,
  },
};

Использование сигнатур индекса с вложенными объектами

Сигнатуры индекса можно использовать, когда вы не уверены, сколько свойств будет у объекта, но уверены в типе свойств объекта. Мы можем определить другой тип, называемый 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 вместо ключевого слова type. Вот пример объекта 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();

Вложенные объекты с использованием интерфейсов

Точно так же, как мы использовали ключевое слово 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();

Что вы можете сделать дальше 🙏😊

Если вам понравилась статья, рассмотрите возможность подписки на Cloudaffle, мой канал на YouTube, где я продолжаю публиковать подробные руководства и все обучающие материалы для программного обеспечения. Разработчики. Вы также можете следить за мной на Hashnode; дескриптор моего профиля — @Cloudaffle. Ставьте лайк, если вам понравилась статья; это поддерживает мою мотивацию на высоком уровне 👍.

:::информация Также опубликовано здесь.

:::

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE