TypeScript

Vuetify полностью совместим с TypeScript, что позволяет создавать более безопасные и предсказуемые приложения на Vue.js. Основное преимущество использования TypeScript с Vuetify заключается в строгой типизации компонентов, пропсов и событий, что снижает количество ошибок на этапе компиляции и облегчает поддержку крупного кода.

Установка и настройка проекта с TypeScript

Для создания проекта с Vuetify и TypeScript используется Vue CLI:

vue create my-project

При выборе настроек необходимо включить поддержку TypeScript. После установки проекта добавление Vuetify выполняется командой:

vue add vuetify

В процессе установки CLI предложит выбрать вариант преднастройки компонентов. Рекомендуется использовать опцию “Default (recommended)” для базовой интеграции, а затем настраивать вручную типизацию компонентов при необходимости.

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

Каждый компонент Vuetify имеет свои собственные типы, которые можно импортировать из пакета vuetify/lib. Например, для кнопки v-btn:

import type { VBtn } from 'vuetify/lib/components/VBtn';

const buttonRef = ref<VBtn | null>(null);

Использование ref с конкретным типом компонента позволяет получить доступ к методам и свойствам компонента без приведения типов и дополнительных проверок.

Работа с пропсами и событиями

Vuetify предоставляет строгую типизацию для пропсов. Например, компонент v-text-field имеет следующие типы пропсов:

import type { VTextField } from 'vuetify/lib/components/VTextField';

const textFieldProps: Partial<VTextField> = {
  label: 'Имя пользователя',
  outlined: true,
  dense: false,
};

События компонентов также типизированы. Для v-text-field событие input можно обрабатывать так:

const onIn put = (value: string) => {
  console.log('Введённое значение:', value);
};

Использование Partial и явного указания типов пропсов повышает предсказуемость кода и предотвращает передачу некорректных данных.

Создание пользовательских компонентов с Vuetify и TypeScript

При создании своих компонентов важно использовать интерфейсы для пропсов:

import { defineComponent, ref } from 'vue';

interface MyCardProps {
  title: string;
  subtitle?: string;
}

export default defineComponent({
  name: 'MyCard',
  props: {
    title: { type: String, required: true },
    subtitle: { type: String, required: false },
  },
  setup(props: MyCardProps) {
    const expanded = ref(false);

    const toggle = () => {
      expanded.value = !expanded.value;
    };

    return { expanded, toggle };
  },
});

Такой подход позволяет избежать ошибок при передаче пропсов и обеспечивает автодополнение в редакторе кода.

Использование Vuetify с Composition API и TypeScript

Composition API обеспечивает более гибкую работу с состоянием и реактивными переменными. Пример использования v-dialog с TypeScript:

import { ref } from 'vue';
import type { VDialog } from 'vuetify/lib/components/VDialog';

const dialog = ref<VDialog | null>(null);
const isOpen = ref(false);

const openDialog = () => {
  isOpen.value = true;
};

const closeDialog = () => {
  isOpen.value = false;
};

Типизация через ref<VDialog | null> позволяет обращаться к методам компонента напрямую, например dialog.value?.show().

Типизация тем и стилей

Vuetify поддерживает настройку тем через объект ThemeDefinition, который также можно типизировать:

import type { ThemeDefinition } from 'vuetify/lib/framework';

const customTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: '#1976D2',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
  },
};

Строгая типизация тем предотвращает ошибки при указании цветов и свойств.

Подключение и типизация плагинов Vuetify

При использовании плагинов, например vuetify/lib/plugins:

import { createVuetify } from 'vuetify';
import type { VuetifyOptions } from 'vuetify';

const vuetifyOptions: VuetifyOptions = {
  theme: {
    defaultTheme: 'customTheme',
    themes: { customTheme },
  },
};

export const vuetify = createVuetify(vuetifyOptions);

Использование интерфейсов VuetifyOptions обеспечивает корректность конфигурации на этапе компиляции.