TypeScript Academy · Oppitunti

Objektien destrukturointityypit

Tyypittäkää destrukturoidut objektin ominaisuudet sekoittamatta niitä uudelleennimeämissyntaksiin.

Oppitunti 1/413 vaihetta

Objektien destrukturointityypit 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.

Destrukturointi kohtaa tyypit

Olioiden destrukturoinnilla ominaisuuksia poimitaan oliosta paikallisiin muuttujiin. TypeScriptissä voitte merkitä destrukturoidun rakenteen tyypin – mutta syntaksissa on tunnettu sudenkuoppa. Katsotaan, miten tämä tehdään oikein.

Olioiden perusdestrukturointi

Tavallisessa destrukturoinnissa ominaisuudet poimitaan nimien perusteella. TypeScript päättelee kunkin muuttujan tyypin lähdeoliosta.

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

Koko kuvion tyypittäminen

Kun haluatte tyypittää destrukturoidut muuttujat, sijoittakaa tyyppi koko kuvion jälkeen ja kuvatkaa olion rakenne – älkää sijoittako tyyppiä kunkin muuttujan perään.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Funktioparametrien destrukturointi

Erittäin yleinen malli on destrukturoida parametriolio suoraan allekirjoituksessa ja merkitä sen rakenne. Funktion rungossa name ja id ovat tyypitettyjä paikallisia muuttujia.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

Kaksoispisteen aiheuttama sekaannus

Destrukturoinnissa kaksoispiste tarkoittaa uudelleennimeämistä, ei tyypin merkitsemistä. Kirjoitus { name: string } luo muuttujan nimeltä string, joka sisältää ominaisuuden name arvon – lähes koskaan tämä ei ole tarkoitus.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Uudelleennimeäminen ja tyyppimerkintä yhdessä

Jos tarvitsette sekä uudelleennimeämistä että tyypitystä, nimetkää sidos uudelleen kaksoispisteellä ja lisätkää sitten tyyppimerkintä koko kuvioon. Muodon tyyppimerkinnässä käytetään silti alkuperäisiä ominaisuuksien nimiä.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Nimetyn tyypin käyttäminen

Jos rakenne ei ole aivan yksinkertainen, käyttäkää mieluummin nimettyä rajapintaa kuin suoraan määriteltyä muotoa. Se on selkeämpi lukea ja sitä voi käyttää uudelleen.

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

Vain joidenkin ominaisuuksien destrukturointi

Teidän ei tarvitse poimia jokaista kenttää. Valitkaa tarvitsemanne kentät; objektin muiden ominaisuuksien tyypillä ei ole vaikutusta luomiinne paikallisiin muuttujiin.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Palautusarvojen destrukturointi

Kun funktio palauttaa objektin, voitte destrukturoita tuloksen heti. Tyypit siirtyvät palautustyypistä paikallisille muuttujille.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Lopun kokoaminen

Rest-kuvio kokoaa jäljelle jäävät ominaisuudet uudeksi objektiksi. TypeScript tyypittää sen lähdetyypiksi, josta poimitut avaimet on vähennetty.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Suoraan määritellyn ja nimetyn muodon kertaus

Suoraan määritellyt muodot sopivat kertaluonteisiin, pieniin kuvioihin. Käyttäkää nimettyä tyyppiä heti, kun muoto kasvaa tai toistuu. Muistakaa myös: kaksoispiste nimeää sidoksen uudelleen, ja tyyppimerkintä tulee sulkevan aaltosulkeen jälkeen.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Pikatarkistus

Testatkaa, miten hyvin ymmärrätte tyypitetyn objektin destrukturoinnin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Destrukturoinnin tyyppimerkinnät sijoitetaan koko kuvion jälkeen, ja ne kuvaavat objektin muodon. Kuvion sisällä oleva kaksoispiste nimeää sidoksen uudelleen, ei lisää sille tyyppimerkintää. Destrukturoikaa funktion parametreja ja palautusarvoja muotokuvauksilla tai nimetyillä tyypeillä, poimikaa vain tarvitsemanne kentät ja kootkaa loput rest-kuvion avulla.

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 ”Objektien destrukturointityypit” ilmainen?

Kyllä – oppitunnin ”Objektien destrukturointityypit” 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 ”Objektien destrukturointityypit”?

Tyypittäkää destrukturoidut objektin ominaisuudet sekoittamatta niitä uudelleennimeämissyntaksiin. 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 ”Objektien destrukturointityypit”-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