0Pricing
Vue Academy · Урок

Объявления TypeScript для библиотек компонентов

vite-plugin-dts, создание файлов .d.ts и типизация свойств компонентов для пользователей библиотеки

«Объявления TypeScript для библиотек компонентов» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Зачем нужны объявления типов

Пользователи TypeScript ожидают файлы .d.ts, чтобы получать автодополнение и проверку типов для ваших компонентов и свойств. Опубликованная библиотека должна поставлять сгенерированные объявления вместе с JS-кодом.

vite-plugin-dts

vite-plugin-dts создаёт файлы .d.ts из исходного кода во время сборки Vite, включая типы для однофайловых компонентов .vue.

npm install -D vite-plugin-dts

Добавление плагина

Добавьте dts() в массив плагинов. После компиляции он создаёт объявления и записывает их в dist.

import dts from "vite-plugin-dts";

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

insertTypesEntry

Параметр insertTypesEntry создаёт единую входную точку index.d.ts, повторно экспортирующую все ваши типы и соответствующую входной точке JS.

dts({
  insertTypesEntry: true
})

Сгенерированные файлы d.ts

После сборки в dist находятся файлы .d.ts, соответствующие исходным файлам, а также объединённое объявление для входной точки. Они описывают свойства компонентов, отправляемые события и экспорты.

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

Поле типов в package.json

Укажите пользователям на объявление для входной точки с помощью поля types (или typings), чтобы TypeScript находил типы вашей библиотеки.

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

Типы в карте exports

Современные пакеты также предоставляют типы для каждой входной точки в карте exports, чтобы импорты подм paths разрешались корректно.

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

Автодополнение глобальных компонентов

Когда пользователи регистрируют ваши компоненты глобально, TypeScript должен видеть их объявленными в интерфейсе GlobalComponents, чтобы обеспечивать автодополнение в шаблонах и проверку свойств.

Расширение GlobalComponents

Поставьте расширение модуля, добавляющее ваши компоненты в GlobalComponents модуля vue. Пользователи, ссылающиеся на ваши типы, получают IntelliSense в шаблонах.

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

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

Типизация свойств компонентов

Используйте defineProps с типом TypeScript, чтобы сгенерированное объявление передавало пользователям точные типы свойств.

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

Проверка типов

Перед публикацией запустите tsc --noEmit в примере приложения пользователя (или используйте такой инструмент, как attw/are-the-types-wrong), чтобы убедиться, что объявления разрешаются, а свойства проверяются.

npx tsc --noEmit

Быстрая проверка

Что даёт пользователям библиотеки расширение GlobalComponents?

Итоги

Используйте vite-plugin-dts с параметром insertTypesEntry для создания файлов .d.ts, укажите объявление для входной точки в поле types файла package.json (и в карте exports) и поставьте расширение GlobalComponents, чтобы пользователи получили автодополнение в шаблонах. Типизируйте свойства с помощью defineProps и проверьте их с помощью tsc --noEmit.

Часто задаваемые вопросы

Урок «Объявления TypeScript для библиотек компонентов» бесплатный?

Да — полный текст урока «Объявления TypeScript для библиотек компонентов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Объявления TypeScript для библиотек компонентов»?

vite-plugin-dts, создание файлов .d.ts и типизация свойств компонентов для пользователей библиотеки Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Объявления TypeScript для библиотек компонентов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка библиотечного режима Vite
  2. Объявления TypeScript для библиотек компонентов
  3. Удаление неиспользуемого кода и автоматический импорт
  4. Публикация в npm и семантическое версионирование
← Назад к Vue Academy