TypeScriptGeneryki i typy zaawansowane
keyof
Tworzy unię nazw kluczy danego typu obiektu.
Przykład
#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: 'Ania', level: 7, points: 1240 },
{ name: 'Kuba', level: 9, points: 980 }
]
console.log(sortBy(students, 'points'))
console.log(sortBy(students, 'level'))Wynik
['Ania', 'Kuba'] ['Kuba', 'Ania']
Definicja i zastosowanie
#Operator keyof przyjmuje typ obiektu i zwraca unię jego kluczy jako typów literałowych. Dla { name: string; level: number } wynikiem jest "name" | "level".
Dzięki temu możesz typować parametry, które muszą być nazwą pola, na przykład kolumnę sortowania w tabeli. Literówka w nazwie pola zostanie wychwycona przez kompilator.
Często łączy się go z typeof, żeby pobrać klucze istniejącego obiektu: keyof typeof translations, oraz z typami mapowanymi, które przechodzą po wszystkich kluczach typu.
Składnia
#Składnia
type Klucze = keyof TypWięcej przykładów
#TypeScript
const labels = { html: 'HTML i CSS', py: 'Python' }
type CourseKey = keyof typeof labels
// type CourseKey = "html" | "py"
const key: CourseKey = 'py'
console.log(labels[key])Wynik
Python
Dobre praktyki
#- Parametry typu „nazwa pola” zawsze typuj przez
keyof, a niestring. - Dla obiektów z sygnaturą indeksu
keyofzwracastring | number, bo klucze liczbowe też są dozwolone.
Powiązane hasła
#- typeof (w typach)Pobiera typ zmiennej lub wartości, żeby użyć go w innym miejscu.
- Typy indeksowane T[K]Pobiera typ pola z innego typu, tak jak odczyt właściwości z obiektu.
- Typy mapowaneTworzą nowy typ obiektu, przekształcając każdy klucz innego typu.
- Ograniczenia generyków (extends)Wymaganie, żeby parametr typu spełniał określony kształt.
Widzisz błąd albo brakuje przykładu? Napisz do nas.