Przejdź do głównej treści
eLearner.app
Moduł 6 · Lekcja 2 z 212/14 w kursie~15 min
Lekcje modułu (2/2)

Typy Mapowane

Typy mapowane pozwalają na tworzenie nowych typów na podstawie istniejących poprzez transformację ich właściwości jedna po drugiej. Opierają się na składni pętli po kluczach przy użyciu operatora keyof.

TS
type Mapped<T> = {
  [P in keyof T]: T[P];
};

Ten przykład to typ mapowany identyczny z oryginalnym: przechodzi przez każdy klucz P w keyof T i przypisuje mu ten sam typ T[P].


Modyfikatory mutowalności i opcjonalności

Możemy dodawać lub usuwać modyfikatory, takie jak readonly oraz ? (opcjonalność), poprzez poprzedzenie ich znakiem + (dodaj, domyślnie) lub - (usuń).

Na przykład, aby usunąć opcjonalność ze wszystkich właściwości typu (czyniąc je wymaganymi):

TS
type Concrete<T> = {
  [P in keyof T]-?: T[P];
};

Modyfikator -? usuwa flagę opcjonalności z każdej właściwości.


Remapowanie kluczy za pomocą as

W TypeScript 4.1+ możliwe jest remapowanie kluczy typu mapowanego przy użyciu klauzuli as oraz szablonowych typów literalnych (template literal types).

TS
type ScriviSetters<T> = {
  [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void;
};

W tym przypadku zmieniamy nazwę każdej właściwości K na set[SklasyfikowanyKlucz] i zmieniamy jej typ na funkcję ustawiającą (setter).


Spróbuj sam

Ćwiczenie 1: Czynienie właściwości nullowalnymi

Ćwiczenie#ts.m6.l2.e1
Próby: 0Ładowanie...

Zadeklaruj generyczny typ mapowany Nullable<T>, który przyjmuje obiekt T i transformuje każdą jego właściwość tak, aby mogła przyjmować również wartość null (np. T[K] | null).

Ładowanie edytora...
Pokaż wskazówkę

Użyj składni [K in keyof T]: T[K] | null; wewnątrz obiektu typu mapowanego.

Rozwiązanie dostępne po 3 próbach

Ćwiczenie 2: Dynamiczne generowanie getterów za pomocą as

Ćwiczenie#ts.m6.l2.e2
Próby: 0Ładowanie...

Utwórz typ mapowany o nazwie GetterNames<T>, który transformuje klucze obiektu T poprzez dodanie prefiksu 'get' i sklasyfikowanie oryginalnego klucza (użyj Capitalize). Na przykład, jeśli kluczem jest name, stanie się on getName. Ustaw typ właściwości na () => T[K].

Ładowanie edytora...
Pokaż wskazówkę

Użyj as \`get\${Capitalize<string & K>}\` do remapowania klucza oraz () => T[K] jako typu zwracanego właściwości.

Rozwiązanie dostępne po 3 próbach