Podstawy•LEKCJA 13 / 26

Interfejsy

Kurs TypeScript · Wyjaśnienie, przykłady, oczekiwany wynik i ćwiczenie.

Interfejs opisuje strukturę, jaką musi spełnić obiekt.

Jak to działa?

interface dobrze nadaje się do definiowania kontraktów obiektów i klas. Dla wielu prostych struktur type i interface mają podobne zastosowanie.

Przykład 1 — poznaj zapis

interface Product {
  id: number;
  name: string;
}

const product: Product = { id: 1, name: "Książka" };

Brak wymaganego pola name byłby błędem typowania.

Przeczytaj kod linijka po linijce

  1. interface Product {Definiujemy nowy typ obiektu lub umowę dotyczącą jego zachowania.
  2. const product: Product = { id: 1, name: "Książka" };Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
Oczekiwany wynik / efektpo uruchomieniu przykładu
Brak tekstu w konsoli. Obiekt product spełnia interfejs.

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

interface Named { name: string }
const person: Named = { name: "Ala" };
console.log(person.name);
Wynik drugiego przykładupo uruchomieniu przykładu
Ala
Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Zdefiniuj interfejs Player z nazwą i punktami.

To już koniec tej lekcji.

Jeśli rozumiesz przykład, oznacz lekcję jako ukończoną i przejdź dalej.