0Pricing
Vue Academy · Aula

Declarações TypeScript para bibliotecas de componentes

vite-plugin-dts, geração de arquivos .d.ts e tipagem das props de componentes para consumidores da biblioteca.

Declarações TypeScript para bibliotecas de componentes é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Por que declarar tipos

Os consumidores de TypeScript esperam arquivos .d.ts para obter conclusão automática e verificação de tipos nos componentes e nas propriedades. Uma biblioteca publicada deve incluir declarações geradas junto com seu JS.

vite-plugin-dts

vite-plugin-dts gera arquivos .d.ts a partir do seu código-fonte durante a compilação do Vite, incluindo tipos para componentes de arquivo único .vue.

npm install -D vite-plugin-dts

Adicionando o plug-in

Adicione dts() à lista de plug-ins. Ele é executado após a compilação para gerar declarações em dist.

import dts from "vite-plugin-dts";

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

insertTypesEntry

A opção insertTypesEntry gera uma única entrada index.d.ts que reexporta todos os seus tipos, correspondendo ao seu ponto de entrada JS.

dts({
  insertTypesEntry: true
})

Arquivos d.ts gerados

Após a compilação, dist contém arquivos .d.ts que espelham sua origem, além da declaração de entrada agregada. Eles descrevem as propriedades dos componentes, os eventos emitidos e as exportações.

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

O campo de tipos de package.json

Aponte os consumidores para a declaração de entrada usando o campo types (ou typings), para que o TypeScript resolva os tipos da sua biblioteca.

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

Tipos no mapa de exportações

Os pacotes modernos também expõem tipos por entrada no mapa de exports, para que as importações de subcaminhos sejam resolvidas corretamente.

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

Conclusão automática de componentes globais

Quando os consumidores registram seus componentes globalmente, o TypeScript precisa que eles sejam declarados na interface GlobalComponents para oferecer conclusão automática em modelos e verificação das propriedades.

Ampliando GlobalComponents

Inclua uma ampliação de módulo que adicione seus componentes a GlobalComponents do vue. Os consumidores que referenciarem seus tipos terão IntelliSense nos modelos.

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

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

Tipando propriedades de componentes

Use defineProps com um tipo do TypeScript, para que a declaração gerada transmita aos consumidores tipos precisos para as propriedades.

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

Verificando os tipos

Antes de publicar, execute tsc --noEmit em um consumidor de exemplo (ou use uma ferramenta como attw/are-the-types-wrong) para confirmar que as declarações são resolvidas e que as propriedades são verificadas.

npx tsc --noEmit

Verificação rápida

O que a ampliação de GlobalComponents oferece aos consumidores da biblioteca?

Recapitulação

Use vite-plugin-dts com insertTypesEntry para gerar arquivos .d.ts, aponte o campo types de package.json (e o mapa de exports) para a declaração de entrada e inclua uma ampliação de GlobalComponents, para que os consumidores obtenham conclusão automática nos modelos. Tipar as propriedades com defineProps e verificar com tsc --noEmit.

Perguntas Frequentes

A aula “Declarações TypeScript para bibliotecas de componentes” é grátis?

Sim — o texto completo de “Declarações TypeScript para bibliotecas de componentes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Declarações TypeScript para bibliotecas de componentes”?

vite-plugin-dts, geração de arquivos .d.ts e tipagem das props de componentes para consumidores da biblioteca. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Declarações TypeScript para bibliotecas de componentes”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do modo de biblioteca do Vite
  2. Declarações TypeScript para bibliotecas de componentes
  3. Tree-shaking e importação automática
  4. Publicação no npm e versionamento semântico
← Voltar para Vue Academy