Łączenie typeof i keyof
Wyprowadzaj precyzyjne typy, łącząc operatory typów
Łączenie typeof i keyof to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 4 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.
Potężne połączenie
Samodzielnie typeof wyprowadza typ z wartości, a keyof wylicza klucze typu. Razem — keyof typeof value — tworzą unię rzeczywistych kluczy wartości, umożliwiając w pełni bezpieczny typowo dostęp.
keyof typeof w praktyce
Najpierw proszę utworzyć obiekt const, następnie przechwycić jego typ za pomocą typeof, a na końcu wyliczyć jego klucze za pomocą keyof. Wynikiem jest unia dosłownych nazw kluczy obiektu.
const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])Dlaczego istnieje ten wzorzec
Często mają Państwo obiekt dostępny w czasie działania, ale nie mają osobnego interfejsu. keyof typeof zapewnia typ kluczy bez konieczności duplikowania kształtu obiektu w ręcznie napisanym typie.
const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2Bezpieczny typowo dostęp według klucza
Parametr funkcji typu keyof typeof obj odrzuca nieprawidłowe klucze już podczas kompilacji, dzięki czemu dostęp indeksowany wewnątrz funkcji jest gwarantowanie bezpieczny.
const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a keyObiekty stałych podobne do enumów
Popularny idiom: należy zdefiniować obiekt as const jako pseudo-enum, a następnie wyprowadzić z niego zarówno typ kluczy, jak i typ wartości.
const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)Klucze a wartości
Proszę zwrócić uwagę na różnicę: keyof typeof obj daje nazwy kluczy, natomiast typeof obj[keyof typeof obj] daje typy wartości. Należy wybrać wariant odpowiedni dla danego API.
const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)Generyczny getProperty
Klasyczny getter bezpieczny typowo ogranicza parametr klucza za pomocą K extends keyof T i zwraca T[K], dzięki czemu typ wyniku dokładnie odpowiada wyszukanej właściwości.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)Typ zwracany zależy od klucza
Ponieważ zwracana jest wartość typu T[K], typ wyniku każdego wywołania dopasowuje się do konkretnego przekazanego klucza — dla jednego klucza będzie to liczba, a dla innego string.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id") // number
const nm = getProperty(u, "name") // string
console.log(id, nm)Nieprawidłowe klucze są odrzucane
Przekazanie klucza, który nie istnieje w obiekcie, powoduje błąd kompilacji. Ograniczenie generyczne wymusza tę kontrolę, zanim kod zostanie uruchomiony.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))Setter bezpieczny typowo
Ten sam mechanizm pozwala zbudować setter: parametr wartości ma typ T[K], więc można przypisać wyłącznie wartość właściwego typu dla danego klucza.
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)Zastosowanie całości
Wzorzec keyof typeof w połączeniu z generycznym dostępem T[K] zapewnia bezpieczne i wielokrotnego użytku narzędzia do pracy z rzeczywistymi obiektami — stanowiące podstawę typowanych czytników konfiguracji, mechanizmów wyszukiwania i pomocników formularzy.
const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
return theme[name]
}
console.log(color("danger")) // #f00Szybkie sprawdzenie
Proszę sprawdzić swoją wiedzę na temat łączenia typeof i keyof.
Podsumowanie
keyof typeof value wyprowadza unię rzeczywistych kluczy wartości bez konieczności pisania osobnego interfejsu, zapewniając bezpieczny typowo dostęp indeksowany. Należy odróżniać typy kluczy (keyof typeof obj) od typów wartości (typeof obj[keyof typeof obj]). Wzorzec generyczny getProperty<T, K extends keyof T>(obj, key): T[K] zwraca dokładny typ wyszukanej wartości i odrzuca nieprawidłowe klucze podczas kompilacji.
Często zadawane pytania
Czy lekcja „Łączenie typeof i keyof” jest bezpłatna?
Tak — pełny tekst „Łączenie typeof i 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 „Łączenie typeof i keyof”?
Wyprowadzaj precyzyjne typy, łącząc operatory typów Ć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 4 z 4.
Ile czasu zajmuje lekcja „Łączenie typeof i 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
- Operator typu typeof
- Operator typu keyof
- Typy dostępu indeksowanego
- Łączenie typeof i keyof