Vue Academy · Pelajaran

Deklarasi TypeScript untuk Pustaka Komponen

vite-plugin-dts, membuat file .d.ts, serta mengetik props komponen untuk pengguna pustaka.

Deklarasi TypeScript untuk Pustaka Komponen adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Mengapa Deklarasi Tipe

Pengguna TypeScript mengharapkan berkas .d.ts agar mendapatkan pelengkapan otomatis dan pemeriksaan tipe pada komponen serta properti Anda. Pustaka yang dipublikasikan harus menyertakan deklarasi yang dihasilkan bersama JS-nya.

vite-plugin-dts

vite-plugin-dts menghasilkan berkas .d.ts dari sumber Anda selama proses pembangunan Vite, termasuk tipe untuk komponen satu berkas .vue.

npm install -D vite-plugin-dts

Menambahkan Pengaya

Tambahkan dts() ke larik pengaya. Pengaya ini berjalan setelah kompilasi untuk menghasilkan deklarasi ke dalam dist.

import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [vue(), dts()]
});

insertTypesEntry

Opsi insertTypesEntry menghasilkan satu entry index.d.ts yang mengekspor ulang semua tipe Anda, sesuai dengan titik masuk JS Anda.

dts({
  insertTypesEntry: true
})

Berkas d.ts yang Dihasilkan

Setelah pembangunan selesai, dist berisi berkas .d.ts yang mencerminkan sumber Anda, ditambah deklarasi entry gabungan. Berkas-berkas ini menjelaskan properti komponen, peristiwa, dan ekspor.

// dist/index.d.ts
export { MyButton } from "./MyButton.vue";
// dist/MyButton.vue.d.ts describes its props

Kolom types pada package.json

Arahkan pengguna ke deklarasi entry melalui kolom types (atau typings) agar TypeScript dapat menemukan tipe pustaka Anda.

{
  "types": "./dist/index.d.ts"
}

types dalam Peta exports

Paket modern juga mengekspos tipe untuk setiap entry dalam peta exports agar impor subjalur dapat ditemukan dengan benar.

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js"
    }
  }
}

Pelengkapan Otomatis Komponen Global

Saat pengguna mendaftarkan komponen Anda secara global, TypeScript memerlukan deklarasi komponen tersebut dalam antarmuka GlobalComponents agar mendapatkan pelengkapan otomatis template dan pemeriksaan properti.

Menambahkan ke GlobalComponents

Sertakan augmentasi modul yang menambahkan komponen Anda ke GlobalComponents milik vue. Pengguna yang merujuk tipe Anda akan mendapatkan IntelliSense dalam template.

// global.d.ts
import MyButton from "./MyButton.vue";

declare module "vue" {
  export interface GlobalComponents {
    MyButton: typeof MyButton;
  }
}
export {};

Memberi Tipe pada Properti Komponen

Gunakan defineProps dengan tipe TypeScript agar deklarasi yang dihasilkan meneruskan tipe properti yang akurat kepada pengguna.

// MyButton.vue <script setup lang="ts">
defineProps<{
  label: string;
  disabled?: boolean;
}>();

Memverifikasi Tipe

Sebelum memublikasikan, jalankan tsc --noEmit dalam proyek pengguna contoh (atau gunakan alat seperti attw/are-the-types-wrong) untuk memastikan deklarasi dapat ditemukan dan properti diperiksa.

npx tsc --noEmit

Pemeriksaan Singkat

Apa yang diberikan augmentasi GlobalComponents kepada pengguna pustaka?

Ringkasan

Gunakan vite-plugin-dts dengan insertTypesEntry untuk menghasilkan berkas .d.ts, arahkan kolom types dalam package.json (serta peta exports) ke deklarasi entry, dan sertakan augmentasi GlobalComponents agar pengguna mendapatkan pelengkapan otomatis template. Beri tipe pada properti dengan defineProps dan verifikasi dengan tsc --noEmit.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Deklarasi TypeScript untuk Pustaka Komponen” gratis?

Ya — teks lengkap “Deklarasi TypeScript untuk Pustaka Komponen” 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 “Deklarasi TypeScript untuk Pustaka Komponen”?

vite-plugin-dts, membuat file .d.ts, serta mengetik props komponen untuk pengguna pustaka. 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 2 dari 4.

Berapa lama pelajaran “Deklarasi TypeScript untuk Pustaka Komponen” 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

Konfigurasi Mode Pustaka Vite
Deklarasi TypeScript untuk Pustaka Komponen
Tree-Shaking dan Impor Otomatis
Mempublikasikan ke npm dan Penerapan Versi Semantik

← Kembali ke Vue Academy