TypeScriptGeneryki i typy zaawansowane
Typy mapowane
Tworzą nowy typ obiektu, przekształcając każdy klucz innego typu.
Przykład
#TypeScript
type Nullable<T> = { [K in keyof T]: T[K] | null }
type Flags<T> = { [K in keyof T]: boolean }
interface Profile {
name: string
bio: string
avatar: string
}
const draft: Nullable<Profile> = { name: 'Ania', bio: null, avatar: null }
const filled: Flags<Profile> = { name: true, bio: false, avatar: false }
const done = Object.values(filled).filter(Boolean).length
console.log(draft.name, `${done}/3 pól`)Wynik
Ania 1/3 pól
Definicja i zastosowanie
#Typ mapowany przechodzi po kluczach typu i dla każdego tworzy nowe pole: { [K in keyof T]: T[K] | null } robi z każdego pola T pole, które może być też null.
Przy mapowaniu możesz dodawać i usuwać modyfikatory: readonly i ? dodajesz, a -readonly i -? usuwasz. Tak zbudowane są Partial, Required i Readonly.
Od TypeScriptu 4.1 klucze można też przemianowywać przez as, na przykład tworząc z pól nazwy getterów: [K in keyof T as `get${Capitalize<K & string>}`].
Składnia
#Składnia
type Nowy<T> = { [K in keyof T]: NowyTypPola }Więcej przykładów
#TypeScript
type Getters<T> = {
[K in keyof T as `get${Capitalize<K & string>}`]: () => T[K]
}
type LevelGetters = Getters<{ level: number; name: string }>
// type LevelGetters = { getLevel: () => number; getName: () => string }Dobre praktyki
#- Zanim napiszesz własny typ mapowany, sprawdź wbudowane
Partial,Required,Readonly,RecordiPick. - Modyfikatory
-?i-readonlypozwalają usuwać opcjonalność i tylko-do-odczytu.
Powiązane hasła
#- keyofTworzy unię nazw kluczy danego typu obiektu.
- Partial<Type>Tworzy typ, w którym wszystkie właściwości są opcjonalne.
- Readonly<Type>Tworzy typ, w którym wszystkie właściwości są tylko do odczytu.
- Typy szablonoweTypy tekstowe budowane ze szablonów, jak `${A}-${B}`.
- Record<Keys, Type>Tworzy typ obiektu o podanych kluczach, w którym każda wartość ma ten sam typ.
Widzisz błąd albo brakuje przykładu? Napisz do nas.