TypeScript Academy · Lekcja

Sygnatury indeksów a Record

Wybieraj między sygnaturami indeksów a typem narzędziowym Record

Sygnatury indeksów a Record 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.

Dwa sposoby typowania mapy

TypeScript oferuje dwa popularne sposoby opisywania słownika: sygnaturę indeksu, taką jak { [k: string]: V }, oraz wbudowany typ użytkowy Record<K, V>. W dużej mierze się pokrywają, ale są inaczej czytelne.

Typ użytkowy Record

Record<K, V> tworzy typ obiektu, którego klucze mają typ K, a wartości typ V. Gdy jako klucza użyje się string, typ ten jest równoważny sygnaturze indeksu znakowego.

type Scores = Record<string, number>
const game: Scores = { alice: 10, bob: 7 }
console.log(game.alice)

Równoważność z sygnaturą indeksu

Te dwa typy opisują tę samą strukturę. Record<string, number> i { [key: string]: number } są zamienne dla dowolnych kluczy znakowych.

type A = Record<string, number>
type B = { [key: string]: number }
const a: A = { x: 1 }
const b: B = a // assignable both ways
console.log(b.x)

Record z unią kluczy literałowych

Prawdziwa siła Record ujawnia się przy skończonej unii kluczy literałowych. Powstaje wtedy obiekt, w którym każdy wymieniony klucz jest wymagany — czego nie da się wyrazić za pomocą sygnatury indeksu.

type Role = "admin" | "editor" | "viewer"
type Perms = Record<Role, boolean>
const p: Perms = { admin: true, editor: true, viewer: false }
console.log(p.admin)

Brakujące klucze są wykrywane

Ponieważ każdy klucz literałowy jest wymagany, pominięcie któregokolwiek powoduje błąd kompilacji. Jest to silna gwarancja, której sygnatury indeksu po prostu nie zapewniają.

type Role = "admin" | "editor" | "viewer"
// const bad: Record<Role, boolean> = { admin: true, editor: true }
// Error: property viewer is missing

Sygnatura indeksu pozwala na dowolny klucz

W przeciwieństwie do niej sygnatura indeksu ma otwarty zakres. Można dodawać klucze, o których nie wspomniano nigdzie indziej, a żadna właściwość nie musi być obecna.

type Open = { [key: string]: number }
const o: Open = {}      // no keys required
o.anything = 1          // any key allowed
console.log(o.anything)

Skończone zbiory kluczy: preferuj Record

Gdy klucze tworzą znany, skończony zbiór, Record z unią literałów jest czytelniejszy i bezpieczniejszy. Dokumentuje dokładnie, które klucze istnieją, i wymusza kompletność.

type Direction = "north" | "south" | "east" | "west"
type Moves = Record<Direction, number>
const m: Moves = { north: 1, south: 0, east: 2, west: 0 }
console.log(m.east)

Otwarte zbiory kluczy: oba rozwiązania działają

Gdy kluczy jest nieograniczenie wiele i są ustalane w czasie działania programu, sprawdzą się zarówno Record<string, V>, jak i sygnatura indeksu. Wiele zespołów wybiera Record ze względu na zwięzłość, a inne — sygnaturę ze względu na jej jednoznaczność.

type Cache1 = Record<string, string>
type Cache2 = { [url: string]: string }
const c: Cache1 = {}
c["/home"] = "<html>"
console.log(c["/home"])

Record to po prostu typ mapowany

Wewnętrznie Record<K, V> jest zdefiniowany jako typ mapowany: { [P in K]: V }. Wiedza ta wyjaśnia, dlaczego unia literałów tworzy wymagane klucze, a string tworzy sygnaturę indeksu.

// lib definition (simplified):
// type Record<K extends string | number | symbol, V> = { [P in K]: V }
type Flags = Record<"a" | "b", boolean>
const f: Flags = { a: true, b: false }
console.log(f.a)

Nazwane klucze i klucz ogólny

Sygnatura indeksu może łączyć klucz ogólny ze stałymi kluczami w jednym interfejsie — jest to przydatne, gdy potrzebne są oba rozwiązania. Sam Record nie pozwala równie wygodnie połączyć wymaganych nazwanych kluczy z otwartym kluczem ogólnym.

interface Response {
  status: number
  [header: string]: number | string
}
const r: Response = { status: 200, "x-id": "abc" }
console.log(r.status)

Wybór w praktyce

Praktyczna zasada: skończone, znane klucze → Record<Union, V> w celu sprawdzania kompletności. Nieograniczony zbiór kluczy → dowolna z tych form. Nazwane klucze i klucz ogólny → sygnatura indeksu wewnątrz interfejsu.

type Status = "ok" | "error"
type Messages = Record<Status, string>
const msg: Messages = { ok: "done", error: "failed" }
console.log(msg.ok)

Szybki test

Sprawdź swoją wiedzę na temat typu Record i sygnatur indeksu.

Podsumowanie

Record<string, V> jest równoważny sygnaturze indeksu znakowego, ale Record z unią kluczy literałowych sprawia, że każdy wymieniony klucz jest wymagany, wykrywając pominięcia podczas kompilacji. Używaj Record<Union, V> dla skończonych, znanych kluczy, dowolnej z tych form dla nieograniczonego zbioru kluczy, a sygnatury indeksu, gdy potrzebujesz nazwanych kluczy i klucza ogólnego. Wewnętrznie Record jest typem mapowanym { [P in K]: V }.

Często zadawane pytania

Czy lekcja „Sygnatury indeksów a Record” jest bezpłatna?

Tak — pełny tekst „Sygnatury indeksów a Record” 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 „Sygnatury indeksów a Record”?

Wybieraj między sygnaturami indeksów a typem narzędziowym Record Ć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 „Sygnatury indeksów a Record”?

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