Dalej•LEKCJA 20 / 26

Ograniczenia generyków

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

T extends ... mówi, jakie właściwości musi posiadać dowolny przekazany typ.

Cel lekcji

Poznać zagadnienie „Ograniczenia generyków”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

To pozwala zachować elastyczność i jednocześnie bezpiecznie korzystać z pól obiektu.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Po kompilacji i wykonaniu JavaScript

function printId<T extends { id: number }>(x: T): number {
  return x.id;
}
console.log(printId({ id: 5, name: "Ala" }));

Przeczytaj kod linijka po linijce

  1. function printId<T extends { id: number }>(x: T): number {Definiujemy funkcję lub metodę, której można użyć później.
  2. return x.id;Zwracamy wyliczoną wartość do miejsca wywołania funkcji.
  3. console.log(printId({ id: 5, name: "Ala" }));Wyświetlamy wartość, aby sprawdzić efekt działania programu.
Oczekiwany wynik / efektpo uruchomieniu przykładu
5

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Utwórz funkcję wymagającą pola name: string.

To już koniec tej lekcji.

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