Vue Academy · Leçon

Déclarations TypeScript pour les bibliothèques de composants

vite-plugin-dts, génération de fichiers .d.ts et typage des props de composants pour les utilisateurs de la bibliothèque

Déclarations TypeScript pour les bibliothèques de composants est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Pourquoi fournir des déclarations de types

Les utilisateurs de TypeScript s’attendent à trouver des fichiers .d.ts afin de bénéficier de la saisie semi-automatique et de la vérification des types sur vos composants et propriétés. Une bibliothèque publiée doit fournir les déclarations générées avec son code JS.

vite-plugin-dts

vite-plugin-dts génère des fichiers .d.ts à partir de votre code source pendant la compilation Vite, y compris les types des composants monofichiers .vue.

npm install -D vite-plugin-dts

Ajouter le plugin

Ajoutez dts() au tableau des plugins. Il s’exécute après la compilation pour générer les déclarations dans dist.

import dts from "vite-plugin-dts";

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

insertTypesEntry

L’option insertTypesEntry génère un point d’entrée unique index.d.ts qui réexporte tous vos types, en correspondance avec votre point d’entrée JS.

dts({
  insertTypesEntry: true
})

Fichiers d.ts générés

Après la compilation, dist contient des fichiers .d.ts qui reproduisent la structure de votre code source, ainsi que la déclaration d’entrée regroupée. Ils décrivent les propriétés des composants, leurs événements émis et leurs exportations.

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

Le champ types de package.json

Indiquez aux utilisateurs la déclaration d’entrée avec le champ types (ou typings) afin que TypeScript puisse résoudre les types de votre bibliothèque.

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

Les types dans la carte exports

Les paquets modernes exposent également les types pour chaque entrée dans la carte exports, afin que les imports de sous-chemins soient résolus correctement.

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

Saisie semi-automatique des composants globaux

Lorsque les utilisateurs enregistrent vos composants globalement, TypeScript doit les déclarer dans l’interface GlobalComponents pour fournir la saisie semi-automatique dans les modèles et vérifier les propriétés.

Étendre GlobalComponents

Fournissez une extension de module qui ajoute vos composants à GlobalComponents de vue. Les utilisateurs qui font référence à vos types bénéficient d’IntelliSense dans les modèles.

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

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

Définir les types des propriétés des composants

Utilisez defineProps avec un type TypeScript afin que la déclaration générée transmette aux utilisateurs les types exacts des propriétés.

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

Vérifier les types

Avant la publication, exécutez tsc --noEmit dans un projet utilisateur d’exemple (ou utilisez un outil comme attw/are-the-types-wrong) afin de confirmer que les déclarations sont correctement résolues et que les propriétés sont vérifiées.

npx tsc --noEmit

Vérification rapide

Que fournit l’extension GlobalComponents aux utilisateurs d’une bibliothèque ?

Récapitulatif

Utilisez vite-plugin-dts avec insertTypesEntry pour générer des fichiers .d.ts, faites pointer le champ types de package.json (ainsi que la carte exports) vers la déclaration d’entrée et fournissez une extension de GlobalComponents afin que les utilisateurs bénéficient de la saisie semi-automatique dans les modèles. Définissez les types des propriétés avec defineProps et vérifiez-les avec tsc --noEmit.

Questions Fréquemment Posées

La leçon « Déclarations TypeScript pour les bibliothèques de composants » est-elle gratuite ?

Oui — le texte complet de « Déclarations TypeScript pour les bibliothèques de composants » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Déclarations TypeScript pour les bibliothèques de composants » ?

vite-plugin-dts, génération de fichiers .d.ts et typage des props de composants pour les utilisateurs de la bibliothèque Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Déclarations TypeScript pour les bibliothèques de composants » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer le mode bibliothèque de Vite
Déclarations TypeScript pour les bibliothèques de composants
Élagage de l’arbre et import automatique
Publier sur npm et gérer le versionnage sémantique

← Retour à Vue Academy