Vue Academy · Lekcja

Deklaracje TypeScript dla bibliotek komponentów

vite-plugin-dts, generowanie plików .d.ts oraz typowanie props komponentów dla użytkowników biblioteki.

Deklaracje TypeScript dla bibliotek komponentów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego potrzebne są deklaracje typów

Konsumenci TypeScript oczekują plików .d.ts, aby uzyskać automatyczne uzupełnianie i sprawdzanie typów komponentów oraz propsów. Opublikowana biblioteka powinna dostarczać wygenerowane deklaracje wraz z kodem JS.

vite-plugin-dts

vite-plugin-dts generuje pliki .d.ts ze źródeł podczas kompilacji Vite, w tym typy dla jednoplikowych komponentów .vue.

npm install -D vite-plugin-dts

Dodawanie wtyczki

Należy dodać dts() do tablicy wtyczek. Po kompilacji generuje ona deklaracje w dist.

import dts from "vite-plugin-dts";

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

insertTypesEntry

Opcja insertTypesEntry generuje pojedynczy punkt wejścia index.d.ts, który re-eksportuje wszystkie typy, zgodnie z punktem wejścia JS.

dts({
  insertTypesEntry: true
})

Wygenerowane pliki d.ts

Po kompilacji katalog dist zawiera pliki .d.ts odzwierciedlające źródła oraz zbiorczą deklarację punktu wejścia. Opisują one propsy komponentów, emitowane zdarzenia i eksporty.

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

Pole types w package.json

Należy wskazać konsumentom deklarację punktu wejścia za pomocą pola types (lub typings), aby TypeScript mógł odnaleźć typy biblioteki.

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

types w mapie exports

Nowoczesne pakiety udostępniają również typy dla poszczególnych punktów wejścia w mapie exports, aby importy podścieżek były poprawnie rozwiązywane.

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

Automatyczne uzupełnianie globalnych komponentów

Gdy konsumenci rejestrują komponenty globalnie, TypeScript potrzebuje ich deklaracji w interfejsie GlobalComponents, aby zapewnić automatyczne uzupełnianie w szablonach i sprawdzanie propsów.

Rozszerzanie GlobalComponents

Należy dostarczyć rozszerzenie modułu, które dodaje komponenty do interfejsu GlobalComponents należącego do vue. Konsumenci odwołujący się do tych typów otrzymają IntelliSense w szablonach.

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

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

Typowanie propsów komponentów

Należy użyć defineProps wraz z typem TypeScript, aby wygenerowana deklaracja przekazywała konsumentom dokładne typy propsów.

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

Weryfikowanie typów

Przed publikacją należy uruchomić tsc --noEmit w przykładowej aplikacji korzystającej z biblioteki (lub użyć narzędzia takiego jak attw/are-the-types-wrong), aby potwierdzić poprawne rozwiązywanie deklaracji i sprawdzanie propsów.

npx tsc --noEmit

Szybkie sprawdzenie

Co rozszerzenie GlobalComponents zapewnia konsumentom biblioteki?

Podsumowanie

Należy użyć vite-plugin-dts wraz z insertTypesEntry, aby wygenerować pliki .d.ts, wskazać deklarację punktu wejścia w polu types pliku package.json (oraz w mapie exports) i dostarczyć rozszerzenie GlobalComponents, dzięki któremu konsumenci uzyskają automatyczne uzupełnianie w szablonach. Propsom należy nadać typy za pomocą defineProps i przeprowadzić weryfikację poleceniem tsc --noEmit.

Często zadawane pytania

Czy lekcja „Deklaracje TypeScript dla bibliotek komponentów” jest bezpłatna?

Tak — pełny tekst „Deklaracje TypeScript dla bibliotek komponentów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Deklaracje TypeScript dla bibliotek komponentów”?

vite-plugin-dts, generowanie plików .d.ts oraz typowanie props komponentów dla użytkowników biblioteki. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Deklaracje TypeScript dla bibliotek komponentów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja trybu biblioteki Vite
Deklaracje TypeScript dla bibliotek komponentów
Tree-shaking i automatyczny import
Publikowanie w npm i wersjonowanie semantyczne

← Powrót do Vue Academy