0Pricing
Vue Academy · Lezione

Dichiarazioni TypeScript per librerie di componenti

vite-plugin-dts, generazione dei file .d.ts, tipizzazione delle props dei componenti per gli utenti della libreria.

Dichiarazioni TypeScript per librerie di componenti è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Perché servono le dichiarazioni dei tipi

I consumer TypeScript si aspettano file .d.ts per ottenere il completamento automatico e il controllo dei tipi sui componenti e sulle props. Una libreria pubblicata dovrebbe includere le dichiarazioni generate insieme al codice JS.

vite-plugin-dts

vite-plugin-dts genera file .d.ts dal codice sorgente durante la build di Vite, compresi i tipi per i componenti .vue a file singolo.

npm install -D vite-plugin-dts

Aggiungere il plugin

Aggiunga dts() all'array dei plugin. Il plugin viene eseguito dopo la compilazione e genera le dichiarazioni nella cartella dist.

import dts from "vite-plugin-dts";

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

insertTypesEntry

L'opzione insertTypesEntry genera un unico file entry index.d.ts che riesporta tutti i tipi, in corrispondenza del punto di ingresso JS.

dts({
  insertTypesEntry: true
})

File d.ts generati

Dopo la build, dist contiene file .d.ts che rispecchiano il codice sorgente, oltre alla dichiarazione entry aggregata. Questi file descrivono props, eventi emessi ed export dei componenti.

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

Il campo types di package.json

Indichi ai consumer la dichiarazione entry con il campo types (o typings), così TypeScript potrà risolvere i tipi della libreria.

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

types nella mappa exports

I pacchetti moderni espongono inoltre i tipi per ogni entry nella mappa exports, così gli import da sottopercorsi vengono risolti correttamente.

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

Completamento automatico dei componenti globali

Quando i consumer registrano globalmente i componenti, TypeScript deve trovarli dichiarati nell'interfaccia GlobalComponents per offrire il completamento automatico nei template e il controllo delle props.

Estendere GlobalComponents

Includa una module augmentation che aggiunga i componenti all'interfaccia GlobalComponents di vue. I consumer che fanno riferimento ai suoi tipi otterranno IntelliSense nei template.

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

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

Tipizzare le props dei componenti

Utilizzi defineProps con un tipo TypeScript, così la dichiarazione generata trasferirà ai consumer i tipi accurati delle props.

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

Verificare i tipi

Prima della pubblicazione, esegua tsc --noEmit in un consumer di esempio (oppure utilizzi uno strumento come attw/are-the-types-wrong) per verificare che le dichiarazioni vengano risolte e che le props siano controllate.

npx tsc --noEmit

Verifica rapida

Che cosa offre ai consumer della libreria l'estensione di GlobalComponents?

Riepilogo

Utilizzi vite-plugin-dts con insertTypesEntry per generare file .d.ts, punti il campo types di package.json (e la mappa exports) alla dichiarazione entry e includa un'estensione di GlobalComponents, così i consumer otterranno il completamento automatico nei template. Tipizzi le props con defineProps e verifichi il risultato con tsc --noEmit.

Domande Frequenti

La lezione «Dichiarazioni TypeScript per librerie di componenti» è gratuita?

Sì — il testo completo di «Dichiarazioni TypeScript per librerie di componenti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Dichiarazioni TypeScript per librerie di componenti»?

vite-plugin-dts, generazione dei file .d.ts, tipizzazione delle props dei componenti per gli utenti della libreria. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Dichiarazioni TypeScript per librerie di componenti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione della modalità libreria di Vite
  2. Dichiarazioni TypeScript per librerie di componenti
  3. Tree-shaking e import automatici
  4. Pubblicazione su npm e versionamento semantico
← Torna a Vue Academy