TypeScriptGénériques et types avancés
Types mappés
Créent un nouveau type d’objet en transformant chaque clé d’un autre type.
Exemple
#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: 'Léa', 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 champs`)Résultat
Léa 1/3 champs
Définition et utilisation
#Un type mappé parcourt les clés d’un type et crée un nouveau champ pour chacune : { [K in keyof T]: T[K] | null } transforme chaque champ de T en un champ qui peut aussi être null.
Pendant le mappage, vous pouvez ajouter et retirer des modificateurs : vous ajoutez readonly et ?, et vous les retirez avec -readonly et -?. C’est ainsi que sont construits Partial, Required et Readonly.
Depuis TypeScript 4.1, les clés peuvent aussi être renommées avec as, par exemple pour transformer des champs en noms de getters : [K in keyof T as `get${Capitalize<K & string>}`].
Syntaxe
#Syntaxe
type New<T> = { [K in keyof T]: NewFieldType }Plus d’exemples
#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 }Bonnes pratiques
#- Avant d’écrire votre propre type mappé, vérifiez les types intégrés
Partial,Required,Readonly,RecordetPick. - Les modificateurs
-?et-readonlypermettent de retirer le caractère optionnel et le statut lecture seule.
Entrées associées
#- keyofCrée une union des noms de clés d’un type d’objet donné.
- Partial<Type>Crée un type dans lequel toutes les propriétés sont optionnelles.
- Readonly<Type>Crée un type dans lequel toutes les propriétés sont en lecture seule.
- Types littéraux de gabaritDes types textuels construits à partir de gabarits, comme `${A}-${B}`.
- Record<Keys, Type>Crée un type d’objet avec des clés données, où chaque valeur a le même type.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.