TypeScript Academy · Lekcja

Łączenie znanych i dynamicznych kluczy

Bezpiecznie łącz stałe właściwości z sygnaturami indeksów

Łączenie znanych i dynamicznych kluczy to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 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.

Stałe właściwości i elastyczne klucze

Często obiekt ma kilka gwarantowanych właściwości oraz otwarty zbiór dodatkowych elementów. TypeScript pozwala zadeklarować nazwane właściwości oraz sygnaturę indeksu w tym samym typie — obowiązuje jednak jedno ważne ograniczenie.

Znany klucz obok sygnatury

W tym przypadku length jest zawsze obecne, a każdy inny klucz typu string wskazuje wartość typu number. Nazwana właściwość i sygnatura indeksu współistnieją.

interface NumberMap {
  length: number
  [key: string]: number
}
const m: NumberMap = { length: 2, a: 1, b: 1 }
console.log(m.length, m.a)

Ograniczenie zgodności

Ważne zastrzeżenie: typ każdej stałej właściwości musi być przypisywalny do typu wartości sygnatury indeksu. Sygnatura indeksu jest obietnicą dotyczącą wszystkich kluczy, dlatego każdy nazwany klucz musi jej przestrzegać.

interface Valid {
  id: number       // ok: number matches the signature
  [key: string]: number
}
const v: Valid = { id: 1, score: 99 }
console.log(v.id + v.score)

Naruszenie ograniczenia

Jeśli typ stałej właściwości nie pasuje do typu wartości indeksu, TypeScript ją odrzuca. Właściwość o nazwie znakowej nie może znajdować się w słowniku przechowującym wartości liczbowe.

// interface Broken {
//   name: string   // Error: string not assignable to number
//   [key: string]: number
// }

Poszerzanie typu wartości indeksu

Aby zezwolić na różne typy stałych właściwości, należy poszerzyć sygnaturę indeksu do unii obejmującej je wszystkie. Wtedy zarówno nazwa będąca ciągiem znaków, jak i wyniki liczbowe będą pasować.

interface Record {
  name: string
  [key: string]: string | number
}
const r: Record = { name: "ana", score: 10 }
console.log(r.name, r.score)

Opcjonalne stałe właściwości

Stałe właściwości mogą być opcjonalne dzięki użyciu ?. Gdy są obecne, nadal muszą być zgodne z sygnaturą indeksu.

interface Config {
  id: string
  label?: string
  [key: string]: string | undefined
}
const c: Config = { id: "x" }
console.log(c.label) // undefined

Dlaczego opcjonalność wymaga undefined

Ponieważ opcjonalnej właściwości może nie być, jej efektywny typ obejmuje undefined. Sygnatura indeksu również musi zatem dopuszczać undefined, w przeciwnym razie TypeScript zgłosi błąd dotyczący opcjonalnego elementu.

interface Safe {
  title?: string
  [key: string]: string | undefined
}
const s: Safe = {}
for (const k in s) console.log(s[k])

Różne typy wartości dzięki uniom

Przykładem realistycznego obiektu ustawień może być znana flaga logiczna, znany ciąg znaków oraz dowolne dodatkowe wartości. Unia w sygnaturze obejmuje typ każdej stałej właściwości.

interface Settings {
  enabled: boolean
  theme: string
  [key: string]: boolean | string
}
const s: Settings = { enabled: true, theme: "dark", lang: "en" }
console.log(s.enabled, s.lang)

Indeks liczbowy ze znanymi kluczami

To ograniczenie dotyczy również sygnatur indeksu liczbowego. Nazwana właściwość liczbowa musi pasować do typu wartości indeksu liczbowego.

interface Sparse {
  count: number
  [index: number]: number
}
const sp: Sparse = { count: 1, 0: 100, 1: 200 }
console.log(sp.count, sp[0])

Czytelniejsza alternatywa

Gdy klucze stałe i dynamiczne mają rzeczywiście niezwiązane ze sobą typy, warto je rozdzielić: zagnieździć część dynamiczną pod osobną właściwością. Pozwala to uniknąć niezręcznej unii.

interface Better {
  name: string
  scores: { [key: string]: number }
}
const b: Better = { name: "ana", scores: { math: 90 } }
console.log(b.name, b.scores.math)

Kiedy je łączyć

Znane i dynamiczne klucze warto łączyć, gdy stałe właściwości w naturalny sposób mają typ wartości taki sam jak dodatkowe elementy — na przykład liczniki z właściwością total albo ustawienia jednego rodzaju z kilkoma gwarantowanymi flagami. W przeciwnym razie zagnieżdżenie pozwala zachować zgodność typów.

interface Tally {
  total: number
  [bucket: string]: number
}
const t: Tally = { total: 0, a: 3, b: 5 }
t.total = t.a + t.b
console.log(t.total) // 8

Szybki test

Sprawdź swoją wiedzę na temat łączenia stałych i dynamicznych kluczy.

Podsumowanie

Stałe właściwości i sygnaturę indeksu można zadeklarować razem, ale typ każdej stałej właściwości musi być przypisywalny do typu wartości sygnatury indeksu. Aby uwzględnić różne typy stałych właściwości, należy poszerzyć sygnaturę za pomocą unii i dodać undefined, gdy właściwości stałe są opcjonalne. Gdy typy są rzeczywiście niezwiązane, część dynamiczną należy zagnieździć pod osobnym kluczem.

Często zadawane pytania

Czy lekcja „Łączenie znanych i dynamicznych kluczy” jest bezpłatna?

Tak — pełny tekst „Łączenie znanych i dynamicznych kluczy” 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 znanych i dynamicznych kluczy”?

Bezpiecznie łącz stałe właściwości z sygnaturami indeksó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 3 z 4.

Ile czasu zajmuje lekcja „Łączenie znanych i dynamicznych kluczy”?

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