Настройка TypeScript

Для работы с Naive UI в TypeScript необходимо корректно настроить проект, чтобы обеспечить строгую типизацию и поддержку всех компонентов библиотеки. Начинается процесс с инициализации TypeScript в проекте:

npm install typescript --save-dev
npx tsc --init

В результате создается файл tsconfig.json, который управляет конфигурацией компилятора. Важно задать следующие ключевые параметры:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}
  • strict: true — включает строгую проверку типов, предотвращая потенциальные ошибки.
  • skipLibCheck: true — ускоряет сборку, пропуская проверку типов внешних библиотек.
  • jsx: "preserve" — сохраняет JSX, необходимый для работы с Vue 3 и Naive UI.

Установка типизированных зависимостей

Naive UI поставляется с полноценной поддержкой TypeScript, поэтому дополнительных типов устанавливать не требуется. Для корректной работы рекомендуется убедиться, что версии Vue и Naive UI совместимы:

npm install vue@^3.2 naive-ui

Для проектов с Vite или Vue CLI можно дополнительно установить плагины для TypeScript, обеспечивающие интеграцию .vue файлов:

npm install @vitejs/plugin-vue --save-dev

или

npm install vue-tsc --save-dev

vue-tsc позволяет проверять типизацию .vue файлов на этапе сборки, что особенно важно при использовании сложных компонентов Naive UI.

Типизация компонентов Naive UI

Все компоненты Naive UI имеют строгие интерфейсы пропсов, что позволяет использовать автодополнение и проверку типов. Например, Button:

import { NButton } from 'naive-ui'

const MyButton = () => (
  <NButton type="primary" size="large" disabled={false}>
    Отправить
  </NButton>
)

TypeScript проверит правильность значений пропсов:

  • type — принимает только 'default' | 'primary' | 'success' | 'error' | 'warning'
  • size — 'small' | 'medium' | 'large'
  • disabled — булевый тип

Ошибки при передаче некорректного типа будут выявлены еще на этапе компиляции.

Использование Composition API с Naive UI

TypeScript максимально раскрывает возможности Composition API. Пример с реактивным состоянием и Naive UI компонентом:

import { ref } from 'vue'
import { NInput } from 'naive-ui'

const text = ref<string>('')

const MyInput = () => (
  <NInput v-model:value={text.value} placeholder="Введите текст" />
)

Ключевые моменты:

  • ref<string> гарантирует, что text всегда будет строкой.
  • v-model:value={text.value} корректно связывает реактивное состояние с компонентом Naive UI.
  • Любые попытки присвоить number вызовут ошибку компиляции.

Создание типизированных конфигураций

Naive UI активно использует объекты конфигурации, например для модальных окон, уведомлений и таблиц. Типизация позволяет избежать ошибок при формировании этих объектов:

import { createDiscreteApi, NMessageProvider } from 'naive-ui'
import type { MessageApi } from 'naive-ui'

const { message } = createDiscreteApi(['message']) as { message: MessageApi }

message.success('Операция выполнена успешно')
  • Использование type { MessageApi } гарантирует правильные методы (success, info, warning, error) и их параметры.
  • Приведение типа через as позволяет TypeScript точно понимать структуру API.

Работа с событиями и слотами

Типизация событий и слотов также важна:

import { NModal } from 'naive-ui'
import type { ModalProps } from 'naive-ui'

const handleClose = (done: () => void) => {
  console.log('Модальное окно закрывается')
  done()
}

const modalProps: ModalProps = {
  show: true,
  onClose: handleClose
}
  • ModalProps включает все доступные пропсы и события.
  • Любые несоответствия, например передача string вместо функции onClose, будут обнаружены компилятором.

Оптимизация типизации в больших проектах

Для крупных проектов рекомендуется:

  1. Создать отдельные интерфейсы для пропсов и состояний компонентов:
interface UserFormState {
  name: string
  email: string
  agreed: boolean
}
  1. Использовать defineComponent с Generic:
import { defineComponent } from 'vue'
import type { NButtonProps } from 'naive-ui'

export default defineComponent({
  props: {
    button: Object as () => NButtonProps
  }
})
  1. Активно использовать vue-tsc для проверки .vue файлов перед сборкой.

Эта стратегия позволяет полностью раскрыть преимущества TypeScript: автодополнение, строгую проверку типов и предсказуемое поведение компонентов Naive UI.

Оглавление