Tyypitetyt propsit ja emitit defineProps/defineEmits-funktioilla
Geneerinen defineProps (), monimutkaiset tyypit, valinnaiset propsit ja emit-tyypitys
Tyypitetyt propsit ja emitit defineProps/defineEmits-funktioilla on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Komponenttien syötteiden ja tulosteiden tyypitys
Kun käytössä on lang="ts", defineProps- ja defineEmits-makrot hyväksyvät TypeScript-tyypit suoraan. Näin komponenttiin tuleville ja siitä lähteville tiedoille saadaan käännösaikaiset tarkistukset.
Propsit interfacesta
Anna tyyppi defineProps-geneeriselle parametrille. interface pitää monimutkaisten props-rakenteiden kuvaukset luettavina ja uudelleenkäytettävinä.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Inline-tyyppiliteraalit
Pienissä komponenteissa inline-oliotyyppi riittää — erillistä interfacea ei tarvita.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Valinnaiset ominaisuudet merkillä ?
Merkitse ominaisuus valinnaiseksi merkillä ?. Valinnaisten propsien tyyppi on T | undefined, ja ylätason komponentti voi jättää ne välittämättä.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Monimutkaiset props-tyypit
Propsit voivat olla taulukoita, union-tyyppejä tai oliorakenteita — kaikkea, mitä TypeScriptillä voi ilmaista.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Oletusarvot withDefaultsillä
Pelkkä tyyppimuoto ei voi sisältää oletusarvoja, joten kääri se withDefaults-funktion sisään. Toinen argumentti yhdistää prop-nimet oletusarvoihin.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Olioiden ja taulukoiden oletusarvot
Olioiden ja taulukoiden oletusarvot on palautettava tehdasfunktiosta, kuten Options API:ssa, jotta samaa instanssia ei jaeta komponenttien kesken.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Tyypitettyjen emit-tapahtumien määrittely
defineEmits voi vastaanottaa tyypin, jossa jokainen tapahtuma ja sen payload ilmoitetaan kutsusignatuurina. Näin väärät payload-tyypit havaitaan jo käännösaikana.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Tyypitettyjen payloadien lähettäminen
Nyt emit hyväksyy vain kelvolliset tapahtumanimet ja niitä vastaavat payload-tyypit. Numeron välittäminen merkkijonon sijaan aiheuttaa käännösvirheen.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}Nimetty tuple-syntaksi
Vue 3.3+ tukee lyhyempää oliomuotoa, jossa jokainen tapahtuma yhdistetään argumenttityyppien tupleen — se on selkeämpi kuin kutsusignatuurit.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Propsit ja emitit yhdessä
Tyypillinen tyypitetty komponentti määrittelee molemmat: syötteet defineProps-makrolla ja tulosteet defineEmits-makrolla, joten koko tiedonkulku tarkistetaan alusta loppuun.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Pikatesti
Testaa tyypitettyjä propseja ja emit-tapahtumia koskevat tietosi.
Kertaus
Opit tyypitetyt komponenttien syötteet ja tulosteet:
- Välitä interface tai inline-tyyppi muotoon defineProps<T>().
- Käytä ?-merkkiä valinnaisille propseille ja withDefaultsia oletusarvoille (olioille ja taulukoille tehdasfunktio).
- defineEmits<T>() määrittää tapahtumanimet ja payloadit.
- Tuple-muoto (event: [payload]) on nykyaikainen lyhytsyntaksi.
Opi HTML 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
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Tyypitetyt propsit ja emitit defineProps/defineEmits-funktioilla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tyypitetyt propsit ja emitit defineProps/defineEmits-funktioilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tyypitetyt propsit ja emitit defineProps/defineEmits-funktioilla”?
Geneerinen defineProps (), monimutkaiset tyypit, valinnaiset propsit ja emit-tyypitys Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue 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 ”Tyypitetyt propsit ja emitit defineProps/defineEmits-funktioilla”-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ä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue 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
- TypeScriptin käyttöönotto Vue-projekteissa
- Tyypitetyt propsit ja emitit defineProps/defineEmits-funktioilla
- Composableien ja refien tyypitys
- Geneeriset Vue-komponentit