Merkkijono- ja numeroindeksiallekirjoitukset
Ymmärtäkää numeeristen avainten säännöt ja erityispiirteet.
Merkkijono- ja numeroindeksiallekirjoitukset on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Kaksi indeksavainten tyyppiä
TypeScript tukee sekä string- että number-indeksisignatuureja. Ne näyttävät samankaltaisilta, mutta toimivat eri tavoin, koska JavaScript tallentaa olion avaimet käytännössä.
Number-indeksisignatuuri
Number-indeksisignatuuri { [i: number]: T } kuvaa olioita, joita indeksoidaan numeerisen sijainnin perusteella – luontevimmin taulukoita ja taulukon kaltaisia rakenteita.
type NumberList = { [index: number]: string }
const names: NumberList = { 0: "ana", 1: "leo" }
console.log(names[0]) // anaJavaScript muuntaa numeroavaimet merkkijonoiksi
Tässä on tärkein asia: JavaScript-olioiden avaimet ovat aina merkkijonoja. Kun kirjoitatte obj[0], moottori tallentaa avaimen todellisuudessa merkkijonona "0". TypeScript mallintaa tämän todellisuuden.
const obj: Record<string, string> = {}
obj[1] = "one"
console.log(obj["1"]) // one — same key!
console.log(Object.keys(obj)) // ["1"]Yhteensopivuussääntö
Koska numeerinen avain on pohjimmiltaan merkkijono, TypeScript noudattaa seuraavaa sääntöä: kun oliolla on sekä number- että string-indeksisignatuuri, number-indeksin arvotyypin on oltava sijoitettavissa string-indeksin arvotyypiksi.
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)Miksi sääntö on olemassa
Jos obj[0] ja obj["0"] viittaavat samaan paikkaan, toisen arvon tyyppi ei voi olla number ja toisen string. Siksi number-indeksin arvotyypin on oltava string-indeksin arvotyypin alatyyppi, jotta tyypit pysyvät yhdenmukaisina.
// This is an ERROR:
// interface Bad {
// [key: string]: string
// [index: number]: number // number not assignable to string
// }Number-indeksoidut taulukot
Taulukot ovat tyypillinen esimerkki number-indeksoidusta tyypistä. Sisäänrakennetulla Array<T>-tyypillä on käytännössä number-indeksisignatuuri, minkä vuoksi arr[i] palauttaa arvon tyyppiä T.
const nums: number[] = [10, 20, 30]
const first: number = nums[0]
console.log(first + nums[2]) // 40Monikot ovat myös number-indeksoituja
Monikot perustuvat number-indeksointiin, mutta sitovat tietyt sijainnit tiettyihin tyyppeihin. Numeerinen käyttö sallitun alueen ulkopuolella palauttaa alkioiden tyyppien unionin tai aiheuttaa virheilmoituksen.
const pair: [string, number] = ["age", 30]
const label: string = pair[0]
const value: number = pair[1]
console.log(label + ": " + value)String-indeksi sallii molemmat haut
String-indeksisignatuurilla varustettu olio sallii myös numeeriselta näyttävän haun, koska numero muunnetaan ensin merkkijonoavaimeksi.
type Bag = { [key: string]: number }
const b: Bag = {}
b[5] = 100 // stored as key "5"
console.log(b["5"]) // 100Number-indeksi ei hyväksy merkkijonoja
Käänteinen ei kuitenkaan päde. Olio, jolla on vain number-indeksisignatuuri, hylkää merkkijonoavaimet käännösaikana, vaikka JavaScript teknisesti sallisi niiden käytön.
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])Valinta näiden välillä
Käyttäkää number-indeksiä järjestys- ja sijaintiperusteiselle datalle, kuten listoille ja monikoille. Käyttäkää string-indeksiä nimetyille hauille, kuten sanakirjoille ja välimuisteille. Jos ette ole varmoja, string on yleiskäyttöisempi vaihtoehto.
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)Käytännöllinen yhdistelmäolio
Voitte yhdistää molemmat signatuurit, kun yksi arvotyyppi toimii kummassakin – tämä on hyödyllistä harvoissa taulukon kaltaisissa säilöissä, joissa on myös nimettyjä paikkoja.
interface Flexible {
[key: string]: number
[index: number]: number
}
const f: Flexible = { 0: 1, total: 99 }
console.log(f[0] + f.total) // 100Pikatesti
Testatkaa, miten hyvin hallitsette string- ja number-indeksisignatuurien erot.
Kertaus
String- ja number-indeksisignatuurit eroavat toisistaan, koska JavaScript tallentaa kaikki avaimet merkkijonoina ja muuntaa numerot merkkijonoavaimiksi. Number-indeksin arvotyypin on oltava sijoitettavissa string-indeksin arvotyypiksi, jos molemmat ovat käytössä. Number-indeksointi mallintaa taulukoita ja monikoita, kun taas string-indeksointi mallintaa sanakirjoja. String-indeksoidut oliot sallivat numeerisen käytön, mutta number-indeksoidut oliot hylkäävät merkkijonoavaimet käännösaikana.
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
Usein kysytyt kysymykset
Onko oppitunti ”Merkkijono- ja numeroindeksiallekirjoitukset” ilmainen?
Kyllä – oppitunnin ”Merkkijono- ja numeroindeksiallekirjoitukset” 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 ”Merkkijono- ja numeroindeksiallekirjoitukset”?
Ymmärtäkää numeeristen avainten säännöt ja erityispiirteet. 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 2/4.
Kuinka kauan ”Merkkijono- ja numeroindeksiallekirjoitukset”-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