Объекты TypeScript стали проще для начинающих

Объекты являются фундаментальной частью JavaScript и TypeScript. Они позволяют группировать связанные данные и функции вместе, предоставляя способ моделирования реальных сущностей в вашем коде. TypeScript улучшает объекты JavaScript с помощью безопасности типов, делая ваш код более предсказуемым и простым в обслуживании. Это руководство упростит концепцию объектов TypeScript для начинающих.

Что такое объект в TypeScript?

Объект — это коллекция пар ключ-значение, где ключи — это строки (или символы), а значения могут быть любого типа. В TypeScript можно определить форму объекта с помощью типов или интерфейсов, гарантируя, что объект будет следовать определенной структуре.

Определение простых объектов в TypeScript

Давайте начнем с определения простого объекта в TypeScript. Это похоже на то, как вы определяете объекты в JavaScript, но с дополнительным преимуществом безопасности типов.

Пример базового объекта

Вот как определить простой объект в TypeScript:

const person: { name: string; age: number } = {
  name: "Alice",
  age: 25
};

console.log(person.name); // Output: Alice
console.log(person.age);  // Output: 25

В этом примере объект person имеет два свойства: name (типа string) и age (типа number). TypeScript гарантирует, что объект будет соответствовать этой структуре.

Использование интерфейсов для определения структуры объекта

Интерфейс — это мощная функция TypeScript, которая определяет форму объекта. Интерфейсы предоставляют способ определения контрактов в вашем коде, гарантируя, что объекты будут придерживаться определенной структуры.

Определение интерфейса

Вот как использовать интерфейс для определения структуры объекта:

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 30
};

console.log(person.name); // Output: Bob
console.log(person.age);  // Output: 30

В этом примере интерфейс Person определяет структуру объекта person. Переменная person должна соответствовать этой структуре, иначе TypeScript выдаст ошибку.

Необязательные свойства в объектах

TypeScript позволяет определять необязательные свойства в объектах с помощью символа ?. Необязательные свойства могут быть опущены при создании объектов, что обеспечивает гибкость в определении структур объектов.

Пример с дополнительными свойствами

Вот пример, где свойство phoneNumber является необязательным:

interface Employee {
  name: string;
  age: number;
  phoneNumber?: string; // Optional property
}

const employee1: Employee = {
  name: "John",
  age: 28
};

const employee2: Employee = {
  name: "Doe",
  age: 32,
  phoneNumber: "123-456-7890"
};

console.log(employee1.phoneNumber); // Output: undefined
console.log(employee2.phoneNumber); // Output: 123-456-7890

В этом примере employee1 не имеет свойства phoneNumber, а employee2 имеет. Оба допустимы согласно интерфейсу Employee.

Свойства только для чтения в объектах

TypeScript позволяет вам сделать свойства readonly, предотвращая их изменение после создания объекта. Это полезно для создания неизменяемых объектов.

Пример со свойствами, доступными только для чтения

Вот как определить свойства, доступные только для чтения:

interface Car {
  readonly brand: string;
  model: string;
}

const car: Car = {
  brand: "Toyota",
  model: "Camry"
};

// car.brand = "Honda"; // Error: Cannot assign to 'brand' because it is a read-only property

car.model = "Corolla"; // Valid
console.log(car.model); // Output: Corolla

В этом примере свойство brand помечено как readonly. Любая попытка изменить его приведет к ошибке времени компиляции.

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

Объекты TypeScript могут быть вложенными, что означает, что объект может содержать другой объект как свойство. Это распространено в сложных структурах данных.

Пример вложенных объектов

Вот пример вложенного объекта:

interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface User {
  name: string;
  age: number;
  address: Address; // Nested object
}

const user: User = {
  name: "Emily",
  age: 27,
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  }
};

console.log(user.address.city); // Output: New York

В этом примере интерфейс User имеет вложенный объект Address. Объект user следует этой структуре, обеспечивая доступ к вложенным свойствам.

Заключение

Объекты в TypeScript более мощные и гибкие, чем простые объекты JavaScript, благодаря определениям типов, необязательным свойствам, свойствам только для чтения и вложенным структурам. Определяя объекты с помощью интерфейсов, вы можете создавать более надежный и безошибочный код. Начните использовать объекты TypeScript в своих проектах, чтобы использовать всю мощь безопасности типов и структурированных данных.