TypeScript Academy · Lekcja

Sygnatury indeksów string i number

Poznaj zasady i osobliwości kluczy numerycznych

Sygnatury indeksów string i number 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.

Dwa rodzaje kluczy indeksu

TypeScript obsługuje sygnatury indeksu zarówno typu string, jak i number. Wyglądają podobnie, ale działają inaczej ze względu na sposób, w jaki JavaScript faktycznie przechowuje klucze obiektów.

Sygnatura indeksu liczbowego

Sygnatura indeksu liczbowego { [i: number]: T } opisuje obiekty indeksowane pozycją liczbową — przede wszystkim tablice i struktury podobne do tablic.

type NumberList = { [index: number]: string }

const names: NumberList = { 0: "ana", 1: "leo" }
console.log(names[0]) // ana

JS zamienia klucze liczbowe na ciągi znaków

Najważniejszy fakt jest następujący: klucze obiektów JavaScript są zawsze ciągami znaków. Zapis obj[0] powoduje, że silnik faktycznie przechowuje klucz jako ciąg znaków "0". TypeScript odzwierciedla tę rzeczywistość.

const obj: Record<string, string> = {}
obj[1] = "one"
console.log(obj["1"]) // one — same key!
console.log(Object.keys(obj)) // ["1"]

Reguła zgodności

Ponieważ klucz liczbowy jest w rzeczywistości ciągiem znaków, TypeScript wymusza następującą regułę: gdy obiekt ma obie sygnatury indeksu — liczbową i znakową — typ wartości indeksu liczbowego musi być przypisywalny do typu wartości indeksu znakowego.

interface Mixed {
  [key: string]: string
  [index: number]: string // must match the string value type
}
const m: Mixed = { 0: "a", name: "b" }
console.log(m[0], m.name)

Dlaczego ta reguła istnieje

Jeśli obj[0] i obj["0"] wskazują to samo miejsce, typ wartości nie może być dla jednego dostępem do liczby, a dla drugiego do ciągu znaków. Dlatego typ wartości indeksu liczbowego musi być podtypem typu wartości indeksu znakowego, aby zachować spójność.

// This is an ERROR:
// interface Bad {
//   [key: string]: string
//   [index: number]: number // number not assignable to string
// }

Indeksowanie liczbowe: tablice

Tablice są typowym przykładem typu indeksowanego liczbowo. Wbudowany typ Array<T> ma w praktyce sygnaturę indeksu liczbowego, dlatego arr[i] zwraca wartość typu T.

const nums: number[] = [10, 20, 30]
const first: number = nums[0]
console.log(first + nums[2]) // 40

Krotki również są indeksowane liczbowo

Krotki opierają się na indeksowaniu liczbowym, ale przypisują konkretnym pozycjom konkretne typy. Dostęp liczbowy poza zakresem zwraca unię typów elementów albo powoduje zgłoszenie błędu.

const pair: [string, number] = ["age", 30]
const label: string = pair[0]
const value: number = pair[1]
console.log(label + ": " + value)

Indeks znakowy pozwala na oba rodzaje dostępu

Obiekt z sygnaturą indeksu znakowego nadal pozwala na dostęp przypominający indeksowanie liczbowe, ponieważ liczba jest najpierw zamieniana na klucz będący ciągiem znaków.

type Bag = { [key: string]: number }
const b: Bag = {}
b[5] = 100        // stored as key "5"
console.log(b["5"]) // 100

Indeks liczbowy nie akceptuje ciągów znaków

Odwrotna sytuacja nie zachodzi. Obiekt typowany wyłącznie za pomocą sygnatury indeksu liczbowego odrzuca klucze będące ciągami znaków podczas kompilacji, mimo że JavaScript technicznie by je dopuścił.

type OnlyNumbers = { [i: number]: string }
const o: OnlyNumbers = { 0: "x" }
// o.name = "y" // Error: property name not on number-indexed type
console.log(o[0])

Wybór między nimi

Dla danych przypominających sekwencje, opartych na pozycjach (list i krotek), należy używać indeksu number. Dla wyszukiwania po nazwie (w słownikach i pamięciach podręcznych) należy używać indeksu string. W razie wątpliwości string jest bardziej uniwersalnym wyborem.

type Positions = { [i: number]: { x: number; y: number } }
type ByName = { [name: string]: { x: number; y: number } }
const p: Positions = { 0: { x: 1, y: 2 } }
console.log(p[0].x)

Praktyczny obiekt z mieszanymi indeksami

Obie sygnatury można połączyć, gdy jeden typ wartości sprawdza się dla obu rodzajów indeksów — jest to przydatne w przypadku rzadkich struktur podobnych do tablic, które udostępniają również nazwane elementy.

interface Flexible {
  [key: string]: number
  [index: number]: number
}
const f: Flexible = { 0: 1, total: 99 }
console.log(f[0] + f.total) // 100

Szybki test

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

Podsumowanie

Sygnatury indeksu typu string i number różnią się, ponieważ JS przechowuje wszystkie klucze jako ciągi znaków, zamieniając liczby na klucze znakowe. Gdy występują obie sygnatury, typ wartości indeksu liczbowego musi być przypisywalny do typu wartości indeksu znakowego. Indeksowanie liczbowe odwzorowuje tablice i krotki, a indeksowanie znakowe — słowniki. Obiekty indeksowane znakowo akceptują dostęp liczbowy, natomiast obiekty indeksowane liczbowo odrzucają klucze znakowe podczas kompilacji.

Często zadawane pytania

Czy lekcja „Sygnatury indeksów string i number” jest bezpłatna?

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

Poznaj zasady i osobliwości kluczy numerycznych Ć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 „Sygnatury indeksów string i number”?

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