TypeScriptGénériques et types avancés
keyof
Crée une union des noms de clés d’un type d’objet donné.
Exemple
#TypeScript
interface Student {
name: string
level: number
points: number
}
type SortKey = keyof Student
// type SortKey = "name" | "level" | "points"
function sortBy(items: Student[], key: SortKey): string[] {
return [...items].sort((a, b) => (a[key] > b[key] ? -1 : 1)).map((s) => s.name)
}
const students: Student[] = [
{ name: 'Léa', level: 7, points: 1240 },
{ name: 'Lucas', level: 9, points: 980 }
]
console.log(sortBy(students, 'points'))
console.log(sortBy(students, 'level'))Résultat
['Léa', 'Lucas'] ['Lucas', 'Léa']
Définition et utilisation
#L’opérateur keyof prend un type d’objet et renvoie une union de ses clés sous forme de types littéraux. Pour { name: string; level: number }, le résultat est "name" | "level".
Cela permet de typer des paramètres qui doivent être un nom de champ, par exemple une colonne de tri dans un tableau. Une faute de frappe dans le nom du champ est détectée par le compilateur.
On le combine souvent avec typeof, pour récupérer les clés d’un objet existant : keyof typeof translations, ainsi qu’avec les types mappés, qui parcourent toutes les clés d’un type.
Syntaxe
#Syntaxe
type Keys = keyof TypePlus d’exemples
#TypeScript
const labels = { html: 'HTML et CSS', py: 'Python' }
type CourseKey = keyof typeof labels
// type CourseKey = "html" | "py"
const key: CourseKey = 'py'
console.log(labels[key])Résultat
Python
Bonnes pratiques
#- Typez toujours les paramètres de type « nom de champ » avec
keyof, et non avecstring. - Pour les objets avec une signature d’index,
keyofrenvoiestring | number, car les clés numériques sont aussi autorisées.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.