Obiekty TypeScript w prosty sposób dla początkujących

Obiekty są podstawową częścią JavaScript i TypeScript. Umożliwiają grupowanie powiązanych danych i funkcji, zapewniając sposób modelowania rzeczywistych bytów w kodzie. TypeScript wzbogaca obiekty JavaScript o bezpieczeństwo typu, dzięki czemu kod jest bardziej przewidywalny i łatwiejszy w utrzymaniu. Ten przewodnik uprości koncepcję obiektów TypeScript dla początkujących.

Czym jest obiekt w TypeScript?

Obiekt object to zbiór par klucz-wartość, gdzie klucze są ciągami znaków (lub symbolami), a wartości mogą być dowolnego typu. W TypeScript możesz zdefiniować kształt obiektu za pomocą typów lub interfejsów, zapewniając, że obiekt będzie miał określoną strukturę.

Definiowanie prostych obiektów w TypeScript

Zacznijmy od zdefiniowania prostego obiektu w TypeScript. Jest to podobne do sposobu definiowania obiektów w JavaScript, ale z dodatkową korzyścią w postaci bezpieczeństwa typu.

Przykład podstawowego obiektu

Oto jak zdefiniować prosty obiekt w TypeScript:

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

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

W tym przykładzie obiekt person ma dwie właściwości: name (typu string) i age (typu number). TypeScript zapewni, że obiekt będzie zgodny z tą strukturą.

Używanie interfejsów do definiowania struktury obiektu

interface to potężna funkcja w TypeScript, która definiuje kształt obiektu. Interfejsy zapewniają sposób definiowania kontraktów w kodzie, zapewniając, że obiekty są zgodne ze określoną strukturą.

Definiowanie interfejsu

Oto jak użyć interfejsu do zdefiniowania struktury obiektu:

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

W tym przykładzie interfejs Person definiuje strukturę obiektu person. Zmienna person musi być zgodna z tą strukturą, w przeciwnym razie TypeScript zgłosi błąd.

Opcjonalne właściwości w obiektach

TypeScript umożliwia definiowanie opcjonalnych właściwości w obiektach za pomocą symbolu ?. Opcjonalne właściwości można pominąć podczas tworzenia obiektów, co zapewnia elastyczność w definiowaniu struktur obiektów.

Przykład z opcjonalnymi właściwościami

Oto przykład, w którym właściwość phoneNumber jest opcjonalna:

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

W tym przykładzie employee1 nie ma właściwości phoneNumber, podczas gdy employee2 ma. Obie są prawidłowe zgodnie z interfejsem Employee.

Właściwości tylko do odczytu w obiektach

TypeScript pozwala na uczynienie właściwości readonly, zapobiegając ich modyfikacji po utworzeniu obiektu. Jest to przydatne do tworzenia niezmiennych obiektów.

Przykład z właściwościami tylko do odczytu

Oto jak zdefiniować właściwości tylko do odczytu:

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

W tym przykładzie właściwość brand jest oznaczona jako readonly. Każda próba jej modyfikacji spowoduje błąd kompilacji.

Zagnieżdżone obiekty w TypeScript

Obiekty TypeScript mogą być zagnieżdżane, co oznacza, że ​​obiekt może zawierać inny obiekt jako właściwość. Jest to powszechne w złożonych strukturach danych.

Przykład obiektów zagnieżdżonych

Oto przykład obiektu zagnieżdżonego:

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

W tym przykładzie interfejs User ma zagnieżdżony obiekt Address. Obiekt user podąża za tą strukturą, umożliwiając dostęp do zagnieżdżonych właściwości.

Wniosek

Obiekty w TypeScript są bardziej wydajne i elastyczne niż zwykłe obiekty JavaScript ze względu na definicje typów, opcjonalne właściwości, właściwości tylko do odczytu i zagnieżdżone struktury. Definiując obiekty za pomocą interfejsów, możesz tworzyć bardziej solidny i wolny od błędów kod. Zacznij używać obiektów TypeScript w swoich projektach, aby wykorzystać pełną moc bezpieczeństwa typów i ustrukturyzowanych danych.