Latihan 1: TypeScript dengan Vue — Vue

Latihan 1 dari materi TypeScript dengan Vue di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Nyatakan props komponen dengan TypeScript. Editor ini berisi dua file .vue, masing-masing dimulai baris : ProfileCard.vue dan App.vue, yang merender <ProfileCard nama="Budi" :umur="17" />. Keduanya <script setup lang="ts">. Biarkan App.vue.

Di <script setup lang="ts"> milik ProfileCard.vue, tulis defineProps<{ nama: string; umur: number }>().
Template-nya sudah menampilkan {{ nama }} dan {{ umur }} tahun. Tanpa defineProps, keduanya bukan props, jadi tampil kosong.

Compiler Vue mengubah tipe di defineProps<...>() jadi deklarasi props sungguhan, lalu tipenya dihapus sebelum jalan, seperti npm run dev. Tipe yang salah gak ditolak di sini; yang menolak adalah vue-tsc (npm run type-check).

Yang dicek:

#name berisi persis Budi, dan #age berisi persis 17 tahun.
Kodenya memakai lang="ts" dan defineProps<, dengan nama: string dan umur: number.

Hint

Komponen cuma menerima props yang dia nyatakan. Di <script setup lang="ts">, bentuk props ditulis sebagai tipe di dalam kurung sudut defineProps.
Di ProfileCard.vue: defineProps<{ nama: string; umur: number }>(). Nama props-nya harus sama dengan atribut yang dikirim App: nama dan umur.
defineProps<{ nama: string umur: number }>()

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: TypeScript dengan Vue — Vue

Hint

Memperbarui Aplikasi