0Pricing
Vue Academy · Pelajaran

Menyiapkan TypeScript dalam Proyek Vue

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' dalam SFC, serta dukungan TypeScript di IDE.

Menyiapkan TypeScript dalam Proyek Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

TypeScript di Vue 3

Vue 3 ditulis ulang dalam TypeScript, sehingga menyediakan dukungan tipe yang sangat baik. Proyek yang dikonfigurasi dengan baik dapat menemukan galat saat kompilasi dan menyediakan pelengkapan otomatis editor yang baik di dalam berkas .vue.

Membuat Kerangka dengan TS

Titik awal termudah adalah create-vue, yang menanyakan apakah Anda ingin menambahkan TypeScript lalu menyiapkan tsconfig.json, vue-tsc, dan alat pengembangan yang tepat.

npm create vue@latest
# select "Add TypeScript? Yes"

Dasar-Dasar tsconfig.json

tsconfig.json mengontrol kompilasi. Pengaturan terpenting untuk menemukan kesalahan adalah mode ketat.

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

Mengapa Mode Ketat Penting

strict: true mengaktifkan strictNullChecks, noImplicitAny, dan lainnya. Pengaturan ini memaksa Anda menangani null/undefined serta mencegah nilai tanpa tipe lolos.

Alias Jalur

Alias @/ memetakan ke folder src sehingga impor tetap rapi, terlepas dari kedalaman berkas. Konfigurasikan alias ini di tsconfig.json dan pembundel Anda.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Menggunakan Alias

Sekarang impor merujuk ke modul dari akar proyek, bukan rangkaian relatif ../../.

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

TypeScript dalam SFC

Untuk menggunakan TypeScript di dalam Komponen Satu Berkas, tambahkan lang="ts" ke tag skrip. Dengan <script setup>, Anda dapat menggunakan makro bertipe.

<script setup lang="ts">
const count: number = 0
</script>

Pemeriksaan Tipe pada SFC

Kompiler tsc biasa tidak memahami berkas .vue. Vue menyediakan vue-tsc, yaitu pembungkus yang memeriksa tipe templat dan skrip secara bersamaan.

vue-tsc --noEmit

Menambahkan Skrip Pemeriksaan

Tambahkan skrip ke package.json agar CI dan Anda dapat memverifikasi tipe dengan satu perintah.

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Dukungan Editor dengan Volar

Ekstensi VS Code Volar (Vue - Official) menyediakan kecerdasan TypeScript di dalam berkas .vue: pelengkapan otomatis, menuju definisi, dan kesalahan tipe templat. Nonaktifkan Vetur lama untuk menghindari konflik.

Mode Pengambilalihan

Volar dapat berjalan dalam Mode Pengambilalihan, menggantikan ekstensi TS bawaan sehingga dapat menangani berkas .ts dan .vue. Ini meningkatkan kinerja dan konsistensi pada proyek besar.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang penyiapan TypeScript.

Ringkasan

Anda telah menyiapkan TypeScript di Vue:

  • Aktifkan mode ketat di tsconfig.json untuk pemeriksaan terkuat.
  • Konfigurasikan alias jalur @/* ke src.
  • Tambahkan lang="ts" ke skrip SFC.
  • Periksa tipe dengan vue-tsc --noEmit dan gunakan ekstensi Volar di VS Code.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan TypeScript dalam Proyek Vue” gratis?

Ya — teks lengkap “Menyiapkan TypeScript dalam Proyek Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan TypeScript dalam Proyek Vue”?

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' dalam SFC, serta dukungan TypeScript di IDE. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menyiapkan TypeScript dalam Proyek Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menyiapkan TypeScript dalam Proyek Vue
  2. Props dan Emits Bertipe dengan defineProps/defineEmits
  3. Mengetik Composable dan Ref
  4. Komponen Vue Generik
← Kembali ke Vue Academy