TypeScript Academy · Oppitunti

Indeksiallekirjoitusten määrittely

Kuvatkaa objekteja, joiden avaimia ei tunneta etukäteen.

Oppitunti 1/413 vaihetta

Indeksiallekirjoitusten määrittely on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Oliot, joiden avaimia ei tunneta

Joskus ominaisuuksien nimiä ei tiedetä etukäteen – kyseessä voi olla pistemäärien sanakirja, välimuisti tai hakutaulukko. TypeScriptin indeksisignatuurin avulla voitte kuvata olion, jonka avaimet voivat olla mitä tahansa mutta jonka arvot ovat samaa tyyppiä.

Indeksisignatuurin perussyntaksi

Indeksisignatuuri kirjoitetaan muodossa { [key: string]: number }. Se tarkoittaa, että mikä tahansa merkkijonoavain viittaa numeroarvoon. Nimi key on vain tunniste – voitte kutsua sitä miksi tahansa.

type Scores = { [name: string]: number }

const game: Scores = { alice: 10, bob: 7 }
console.log(game.alice) // 10

Avainten lisääminen dynaamisesti

Koska kaikki merkkijonoavaimet ovat sallittuja, voitte määrittää ajonaikana täysin uusia ominaisuuksia ilman, että TypeScript ilmoittaa virheestä. Tämä on indeksisignatuurin varsinainen tarkoitus.

type Scores = { [name: string]: number }

const game: Scores = {}
game.charlie = 5     // allowed
game["dave"] = 9     // also allowed
console.log(game.charlie + game.dave) // 14

Mielivaltaisten avainten käyttäminen

Voitte lukea minkä tahansa avaimen, vaikka sitä ei olisi koskaan määritetty. Tyyppijärjestelmä luottaa signatuuriin, joten arvon tyyppi on number – ajonaikana puuttuvan avaimen arvo on kuitenkin undefined. Olkaa varovaisia.

type Scores = { [name: string]: number }

const game: Scores = { alice: 10 }
const missing = game.zara // typed as number, but actually undefined
console.log(missing) // undefined

Kaikkien arvojen on noudatettava tyyppiä

Jokaisen olion ominaisuuden on vastattava signatuurin arvotyyppiä. Numeroarvoa ei voi yhdistää merkkijonoarvoja sisältävään sanakirjaan.

type Labels = { [key: string]: string }

const ok: Labels = { id: "a1", role: "admin" }
// const bad: Labels = { id: "a1", count: 5 } // Error: 5 not a string

Indeksisignatuurit rajapinnoissa

Sama syntaksi toimii myös interface-rakenteen sisällä. Tätä käytetään usein API:n asetuskokoelmien tai vastauskarttojen kuvaamiseen.

interface Dictionary {
  [word: string]: string
}

const defs: Dictionary = {
  cat: "a small animal",
  ts: "a typed superset of JavaScript",
}
console.log(defs.ts)

Arvotyypit voivat olla mitä tahansa

Arvopuoli ei rajoitu perustyyppeihin. Voitte yhdistää avaimiin taulukoita, olioita tai unioneja – mitä datanne kulloinkin tarvitsee.

type Groups = { [team: string]: string[] }

const roster: Groups = {
  red: ["ana", "leo"],
  blue: ["sam"],
}
console.log(roster.red.length) // 2

Indeksisignatuuria käyttävien olioiden läpikäynti

for...in-silmukka käy läpi jokaisen dynaamisen avaimen. Silmukan sisällä arvolla on signatuurin mukainen oikea tyyppi.

type Scores = { [name: string]: number }
const game: Scores = { alice: 10, bob: 7 }

for (const name in game) {
  console.log(name + ": " + game[name])
}

undefined-arvon turvallisuusaukko

Indeksisignatuurit peittävät sen, että haut voivat epäonnistua. Kun otatte noUncheckedIndexedAccess-asetuksen käyttöön tsconfigissa, jokaiseen hakuun lisätään | undefined, jolloin puuttuvat avaimet on käsiteltävä.

// with noUncheckedIndexedAccess on:
type Scores = { [name: string]: number }
const game: Scores = { alice: 10 }
const v = game.bob // type: number | undefined
console.log(v ?? 0)

Vain luku -indeksisignatuurit

Lisätkää signatuurin eteen readonly, jos haluatte estää kirjoittamisen minkä tahansa avaimen kautta. Sanakirjasta tulee rakenne, josta voi ainoastaan hakea arvoja.

type Frozen = { readonly [key: string]: number }

const rates: Frozen = { usd: 1, eur: 1.1 }
// rates.usd = 2 // Error: read-only
console.log(rates.eur)

Milloin indeksisignatuurit ovat hyödyllisiä

Käyttäkää indeksisignatuuria, kun avainten joukko on avoin ja avaimet selviävät ajonaikana: esimerkiksi välimuisteissa, tunnisteen perusteella indeksoiduissa laskureissa tai jäsennetyissä kyselyparametreissa. Jos avainten joukko on kiinteä ja tunnettu, suosikaa erikseen määriteltyjä ominaisuuksia tai Record-tyyppiä.

type Counter = { [event: string]: number }
const clicks: Counter = {}
function track(e: string) { clicks[e] = (clicks[e] ?? 0) + 1 }
track("open"); track("open")
console.log(clicks.open) // 2

Pikatesti

Testatkaa, miten hyvin ymmärrätte indeksisignatuurit.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte, että { [key: string]: T } kuvaa olioita, joilla voi olla mitä tahansa avaimia ja joiden kaikilla arvoilla on tyyppi T. Avaimia voi lisätä dynaamisesti, jokaisen arvon on noudatettava signatuuria, ja puuttuvien avainten haku tuottaa ajonaikana arvon undefined. Käyttäkää readonly-määrettä muuttumattomissa kartoissa ja ottakaa noUncheckedIndexedAccess käyttöön turvallisempia hakuja varten.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Indeksiallekirjoitusten määrittely” ilmainen?

Kyllä – oppitunnin ”Indeksiallekirjoitusten määrittely” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Indeksiallekirjoitusten määrittely”?

Kuvatkaa objekteja, joiden avaimia ei tunneta etukäteen. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Indeksiallekirjoitusten määrittely”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Indeksiallekirjoitusten määrittely
Merkkijono- ja numeroindeksiallekirjoitukset
Tunnettujen ja dynaamisten avainten yhdistäminen
Indeksiallekirjoitukset ja Record

← Takaisin: TypeScript Academy