Прості об’єкти 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 у своїх проектах, щоб використовувати всю потужність безпеки типів і структурованих даних.