Declaraciones de TypeScript para bibliotecas de componentes
vite-plugin-dts, generación de archivos .d.ts y tipado de props de componentes para consumidores de la biblioteca
Declaraciones de TypeScript para bibliotecas de componentes es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Por qué se necesitan declaraciones de tipos
Los consumidores de TypeScript esperan archivos .d.ts para obtener autocompletado y comprobación de tipos en sus componentes y props. Una biblioteca publicada debe incluir declaraciones generadas junto con su código JavaScript.
vite-plugin-dts
vite-plugin-dts genera archivos .d.ts a partir del código fuente durante la compilación de Vite, incluidos los tipos de los componentes de archivo único .vue.
npm install -D vite-plugin-dtsAñadir el plugin
Añada dts() al array de plugins. Se ejecuta después de la compilación para generar las declaraciones en dist.
import dts from "vite-plugin-dts";
export default defineConfig({
plugins: [vue(), dts()]
});insertTypesEntry
La opción insertTypesEntry genera una única entrada index.d.ts que vuelve a exportar todos sus tipos, de forma coherente con el punto de entrada de JavaScript.
dts({
insertTypesEntry: true
})Archivos d.ts generados
Después de compilar, dist contiene archivos .d.ts que reflejan el código fuente, además de la declaración de entrada agregada. Estos archivos describen las props, los eventos emitidos y las exportaciones de los componentes.
// dist/index.d.ts
export { MyButton } from "./MyButton.vue";
// dist/MyButton.vue.d.ts describes its propsEl campo types de package.json
Indique a los consumidores la declaración de entrada mediante el campo types (o typings) para que TypeScript pueda resolver los tipos de su biblioteca.
{
"types": "./dist/index.d.ts"
}types en el mapa exports
Los paquetes modernos también exponen los tipos de cada entrada en el mapa exports, para que las importaciones de subrutas se resuelvan correctamente.
{
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/my-ui-lib.es.js"
}
}
}Autocompletado de componentes globales
Cuando los consumidores registran globalmente sus componentes, TypeScript necesita que se declaren en la interfaz GlobalComponents para ofrecer autocompletado de plantillas y comprobación de props.
Ampliar GlobalComponents
Incluya una ampliación de módulo que añada sus componentes a GlobalComponents de vue. Los consumidores que hagan referencia a sus tipos obtendrán IntelliSense en las plantillas.
// global.d.ts
import MyButton from "./MyButton.vue";
declare module "vue" {
export interface GlobalComponents {
MyButton: typeof MyButton;
}
}
export {};Tipar las props de los componentes
Utilice defineProps con un tipo de TypeScript para que la declaración generada proporcione a los consumidores tipos precisos para las props.
// MyButton.vue <script setup lang="ts">
defineProps<{
label: string;
disabled?: boolean;
}>();Verificar los tipos
Antes de publicar, ejecute tsc --noEmit en un consumidor de ejemplo (o utilice una herramienta como attw/are-the-types-wrong) para confirmar que las declaraciones se resuelven y que las props se comprueban.
npx tsc --noEmitComprobación rápida
¿Qué proporciona la ampliación de GlobalComponents a los consumidores de la biblioteca?
Resumen
Utilice vite-plugin-dts con insertTypesEntry para generar archivos .d.ts, indique en el campo types de package.json (y en el mapa exports) la declaración de entrada e incluya una ampliación de GlobalComponents para que los consumidores obtengan autocompletado en las plantillas. Dé tipo a las props con defineProps y verifique el resultado con tsc --noEmit.
Preguntas frecuentes
¿La lección «Declaraciones de TypeScript para bibliotecas de componentes» es gratis?
Sí — el texto completo de «Declaraciones de TypeScript para bibliotecas de componentes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Declaraciones de TypeScript para bibliotecas de componentes»?
vite-plugin-dts, generación de archivos .d.ts y tipado de props de componentes para consumidores de la biblioteca Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Declaraciones de TypeScript para bibliotecas de componentes»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración del modo biblioteca de Vite
- Declaraciones de TypeScript para bibliotecas de componentes
- Tree-shaking e importación automática
- Publicación en npm y versionado semántico