TypeScript Academy · Lekcja

Operator typu keyof

Uzyskuj unię kluczy typu obiektu za pomocą keyof

Operator typu keyof to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Klucze typu

Operator keyof przyjmuje typ obiektu i tworzy unię jego kluczy właściwości. Stanowi podstawę bezpiecznego typowania dostępu do właściwości oraz generycznych narzędzi do pracy z kluczami.

Podstawy keyof

Zastosuj keyof do interfejsu, aby uzyskać unię nazw jego kluczy jako typów literałowych napisów.

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

Dozwolone są tylko prawidłowe klucze

Zmienna o typie keyof T może przechowywać tylko jeden z rzeczywistych kluczy typu T. Literówki i nieprawidłowe klucze są wykrywane podczas kompilacji.

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

keyof z typeof

Połącz keyof z typeof, aby uzyskać klucze wywnioskowanego typu wartości. W tym przypadku otrzymujemy klucze obiektu konfiguracji bez zapisywania interfejsu.

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

keyof dla sygnatury indeksu string

Dla typu z sygnaturą indeksu string wartość keyof to string | number — ponieważ dozwolony jest dowolny klucz tekstowy, a klucze liczbowe są konwertowane na napisy.

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

keyof dla sygnatury indeksu number

Dla sygnatury indeksu number wartość keyof to po prostu number. Odpowiada to sposobowi, w jaki tablice udostępniają indeksy liczbowe.

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

keyof dla typu tablicy

Zastosowanie keyof do typu tablicy daje zaskakującą unię: indeksy liczbowe oraz wszystkie nazwy metod i właściwości tablicy, takie jak length i push.

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

Bezpieczne iterowanie po kluczach

Użyj keyof, aby pisać pętle, które odwołują się wyłącznie do prawidłowych kluczy. Rzutowanie Object.keys na (keyof T)[] zapewnia bezpieczeństwo typowania dostępu indeksowanego.

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

keyof w ograniczeniach generycznych

Generyczny parametr klucza jest zwykle ograniczany za pomocą K extends keyof T. Gwarantuje to, że klucz rzeczywiście istnieje w obiekcie.

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const name = pluck({ id: 1, name: "Ada" }, "name")
console.log(name) // Ada

Łączenie wielu kluczy

Ponieważ keyof T jest unią, można wykonywać na nim przecięcie lub filtrowanie. W tym przypadku funkcja przyjmuje tablicę prawidłowych kluczy.

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

Dlaczego keyof jest ważne

keyof przekształca nazwy właściwości w typ, który można sprawdzać, umożliwiając tworzenie generycznych funkcji pobierających, ustawiających i mapujących, które nie mogą odwoływać się do nieistniejącego klucza. Operator ten jest powszechnie używany w zaawansowanym TypeScript.

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

Szybkie sprawdzenie

Sprawdź swoje rozumienie operatora keyof.

Podsumowanie

keyof T tworzy unię kluczy właściwości typu T jako typów literałowych, ograniczając zmienne do prawidłowych kluczy. Dla sygnatur indeksu string zwraca string | number, a dla sygnatur indeksu number — number. W połączeniu z typeof wyprowadza klucze z wartości, a w połączeniu z generykami (K extends keyof T) umożliwia bezpieczne typowanie getterów, funkcji wybierających właściwości i iteracji.

Często zadawane pytania

Czy lekcja „Operator typu keyof” jest bezpłatna?

Tak — pełny tekst „Operator typu keyof” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Operator typu keyof”?

Uzyskuj unię kluczy typu obiektu za pomocą keyof Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Operator typu keyof”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do TypeScript Academy