- Typescript object with objects
- # Declare and Type a nested Object in TypeScript
- # Using a type alias to type a nested Object
- # Typing nested objects inline
- # Letting TypeScript infer the type of a nested Object
- # Marking some of the properties of the object as optional
- # Typing nested objects with an index signature
- # Additional Resources
- Назначение типов вложенным объектам в TypeScript
- Использование ключевого слова type
- Вложенные объекты
- Абстрагирование вложенных объектов в отдельные типы
- Использование сигнатур индекса с вложенными объектами
- Интерфейсы для назначения типов свойствам объекта
- Вложенные объекты с использованием интерфейсов
- Что вы можете сделать дальше 🙏😊
Typescript object with objects
Last updated: Jan 23, 2023
Reading time · 3 min
# Declare and Type a nested Object in TypeScript
Use an interface or a type alias to type a nested object in TypeScript. You can set properties on the interface that point to nested objects.
The type of the object can have as deeply nested properties as necessary.
Copied!interface Person name: string; address: country: string; city: string; >; > const person: Person = name: 'Bobby Hadz', address: country: 'Chile', city: 'Santiago', >, >;
We used an interface to type an object that has nested properties.
The address property points to an object that has country and city properties of type string .
# Using a type alias to type a nested Object
You can also use a type alias to achieve the same result.
Copied!type Person = name: string; address: country: string; city: string; >; >; const person: Person = name: 'Bobby Hadz', address: country: 'Chile', city: 'Santiago', >, >;
There are some minor differences between type aliases and interface, however, the examples above do the exact same.
# Typing nested objects inline
You might also see examples online that type nested objects inline.
Copied!const person: name: string; address: country: string; city: string >; > = name: 'Bobby Hadz', address: country: 'Chile', city: 'Santiago', >, >;
However, especially with nested objects, inline types are very difficult to read and should generally be avoided.
# Letting TypeScript infer the type of a nested Object
If you declare a nested object and initialize all of its key-value pairs, you can let TypeScript infer its type.
Copied!/** * const person: name: string; address: country: string; city: string; >; > */ const person = name: 'Bobby Hadz', address: country: 'Chile', city: 'Santiago', >, >;
TypeScript is able to infer the type of the object based on the key-value pairs we have provided upon initialization.
This is a very easy way to learn the type of something — initialize it with values, assign it to a variable and hover over the variable to see its inferred type.
# Marking some of the properties of the object as optional
If you don’t have all of the values of the nested object ahead of time, you can mark them as optional, by using a question mark in the type’s definition.
Copied!type Person = name: string; address?: // 👈️ address is optional country: string; city: string; >; >; const person: Person = name: 'Bobby Hadz', >; person.address = country: 'Chile', city: 'Santiago', >;
We marked the address property on the nested object as optional, so we aren’t required to provide it when initializing the object.
# Typing nested objects with an index signature
You can use an index signature if you don’t know all of the names of an object’s properties in advance.
Copied!type Person = name: string; address: country: string; city: string; [key: string]: any; // 👈️ index signature >; >; const person: Person = name: 'Bobby Hadz', address: country: 'Chile', city: 'Santiago', >, >; person.address.street = 'Example str. 123'; person.address.postCode = 123;
The
The index signature in the examples means that when the address nested object is indexed with a string , it will return a value of any type.
You might also see the index signature
The example shows how even though we didn’t define the address.street or address.postCode properties, we are still able to set them on the nested object.
# Additional Resources
You can learn more about the related topics by checking out the following tutorials:
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
Назначение типов вложенным объектам в TypeScript
Объекты — это то, с чем вы имеете дело, работая разработчиком 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 в других частях вашего кода.
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. Ставьте лайк, если вам понравилась статья; это поддерживает мою мотивацию на высоком уровне 👍.
. информация Также опубликовано здесь.