Dalej•LEKCJA 21 / 26

keyof i typeof

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

Operatory typów pomagają wyprowadzać nowe typy z istniejących struktur.

Jak to działa?

keyof tworzy unię kluczy danego typu. typeof użyty w pozycji typu pobiera typ istniejącej wartości.

To inne zastosowanie typeof niż sprawdzanie wartości w trakcie działania JS.

Przykład 1 — poznaj zapis

const settings = { theme: "dark", pageSize: 20 };
type Settings = typeof settings;
type SettingsKey = keyof Settings;

const key: SettingsKey = "theme";

SettingsKey dopuszcza tylko "theme" lub "pageSize".

Przeczytaj kod linijka po linijce

  1. const settings = { theme: "dark", pageSize: 20 };Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
  2. type Settings = typeof settings;Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
  3. type SettingsKey = keyof Settings;Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
Oczekiwany wynik / efektpo uruchomieniu przykładu
Brak tekstu w konsoli. Typ SettingsKey dopuszcza theme i pageSize.

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.

type User = { name: string; points: number };
type Key = keyof User;
const key: Key = "points";
console.log(key);
Wynik drugiego przykładupo uruchomieniu przykładu
points
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

Dodaj do settings pole language i użyj go jako SettingsKey.

To już koniec tej lekcji.

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