TypeScript Academy · Oppitunti

Sisäkkäiset destrukturointimallit

Tyypittäkää syvälle sisäkkäiset destrukturointilausekkeet.

Oppitunti 4/413 vaihetta

Sisäkkäiset destrukturointimallit on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.

Sisäkkäisten tietojen käsittely

Sisäkkäisellä destrukturoinnilla voitte poimia arvoja objektien sisällä olevista objekteista yhdessä lauseessa. Se on tiivistä, mutta vaikuttaa tyyppeihin tavoilla, jotka on hyvä ymmärtää — ja liiallisesti käytettynä se voi heikentää luettavuutta.

Sisäkkäisen ominaisuuden destrukturointi

Toistakaa objektin muoto vasemmanpuoleisessa kuviossa. Päästäksenne käsiksi kohtaan data.user.name sijoittakaa user-ominaisuuden alle sisäkkäinen kuvio.

const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada

Ulompi nimi ei muodosta sidosta

Hienovarainen sudenkuoppa: kuviossa { user: { name } } user on vain polku, ei sidos. Saatte name-muuttujan, mutta user-nimistä muuttujaa ei ole tämän jälkeen olemassa.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

Sisäkkäisen destrukturoinnin tyypittäminen

Lisätkää koko sisäkkäisen muodon tyyppimerkintä kuvion jälkeen. Jokainen taso vastaa objektin rakennetta.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

Nimetyt tyypit ovat selkeämpiä

Suoraan määritellyistä sisäkkäisistä muodoista tulee nopeasti hankalia. Nimetty rajapinta pitää tyyppimerkinnän siistinä ja mahdollistaa silti sisäkkäisen poiminnan.

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

Molempien tasojen poimiminen

Jos tarvitsette myös ulomman objektin, poimikaa se erikseen ja destrukturoikaa sen jäsenet toisessa vaiheessa. Tämä on usein selkeämpää kuin syvä sisäkkäisyys.

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

Sisäkkäisyyden ja oletusarvojen yhdistäminen

Oletusarvoja voi käyttää millä tahansa tasolla. Antakaa mahdollisesti puuttuvalle sisäkkäiselle kentälle varaarvo siinä kohdassa, jossa sidotte sen.

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

Puuttuvien aliobjektien oletusarvot

Kun kokonainen sisäkkäinen objekti saattaa puuttua, antakaa sille oletusarvoksi {} ennen sen kenttien destrukturointia — muuten ominaisuuden käyttäminen arvosta undefined aiheuttaa virheen.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

Sisäkkäinen taulukko objektissa

Voitte yhdistää objekti- ja taulukkokuvioita. Tässä poimimme sisäkkäisen taulukon ensimmäisen tunnisteen yhdellä rivillä.

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

Luettavuuden kompromissit

Syvät sisäkkäiset kuviot säästävät rivejä, mutta voivat hämärtää tarkoitusta. Kolmen tason syvyys yhdessä oletusarvojen kanssa on vaikea hahmottaa. Jos lukijan täytyy pysähtyä selvittämään rakennetta, jakakaa se vaiheisiin.

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

Tasapainoinen esimerkki

Yksi sisäkkäisyyden taso ja muutama kenttä on yleensä sopiva kompromissi — tiivis mutta ei arvoituksellinen.

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

Pikatarkistus

Testatkaa, miten hyvin ymmärrätte sisäkkäisen destrukturoinnin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Sisäkkäinen destrukturointi jäljittelee objektin muotoa sisempien arvojen saavuttamiseksi. Ulommat avaimet ovat polkuja eivätkä sidoksia, joten vain sisimmistä nimistä tulee muuttujia. Lisätkää koko sisäkkäisen muodon tyyppimerkintä tai käyttäkää nimettyä tyyppiä, antakaa puuttuville aliobjekteille oletusarvoksi {} ennen niiden kenttien destrukturointia ja yhdistäkää tarvittaessa mukaan taulukkokuvioita. Pitäkää sisäkkäisyys matalana — jakakaa syvät kuviot luettavuuden vuoksi vaiheisiin.

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 ”Sisäkkäiset destrukturointimallit” ilmainen?

Kyllä – oppitunnin ”Sisäkkäiset destrukturointimallit” 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 ”Sisäkkäiset destrukturointimallit”?

Tyypittäkää syvälle sisäkkäiset destrukturointilausekkeet. 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 4/4.

Kuinka kauan ”Sisäkkäiset destrukturointimallit”-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

Objektien destrukturointityypit
Taulukoiden ja monikoiden destrukturointi
Oletusarvot destrukturoinnissa
Sisäkkäiset destrukturointimallit

← Takaisin: TypeScript Academy