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

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

Типизация `props`

Props — это основной механизм передачи данных в компоненты. В Quasar, как и в Vue 3, props можно типизировать с помощью TypeScript следующим образом:

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'MyButton',
  props: {
    label: {
      type: String,
      required: true
    },
    size: {
      type: String as PropType<'small' | 'medium' | 'large'>,
      default: 'medium'
    },
    disabled: Boolean,
    onClick: Function as PropType<() => void>
  }
});

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

PropType<T> позволяет указать конкретный тип для сложных данных, например объектов или функций.
Для перечислений (enum) можно использовать литеральные типы, что облегчает проверку корректности значений.
Определение required: true в сочетании с типами позволяет TypeScript сразу выявлять отсутствие обязательного prop при использовании компонента.

Типизация `emits`

События в Quasar-компонентах также можно строго типизировать. Это особенно важно для компонентов пользовательского интерфейса, таких как кнопки, формы или диалоги.

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyInput',
  emits: {
    update: (value: string) => typeof value === 'string',
    submit: (payload: { id: number; name: string }) => 
      typeof payload.id === 'number' && typeof payload.name === 'string'
  }
});

Особенности:

В объекте emits ключ — это название события, а значение — функция-проверка типов.
TypeScript обеспечит автодополнение при вызове $emit('update', ...) и проверку типов переданного значения.

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

Для крупных компонентов рекомендуется выносить типы в отдельные интерфейсы. Это повышает читаемость и переиспользуемость кода.

interface User {
  id: number;
  name: string;
  email?: string;
}

export default defineComponent({
  props: {
    users: {
      type: Array as PropType<User[]>,
      default: () => []
    }
  }
});

Преимущества:

Возможность использовать тип User в других компонентах.
Удобное автодополнение в IDE при работе с массивами объектов.
Снижение вероятности ошибок при передаче данных между компонентами.

Типизация слотов

Quasar активно использует слоты для создания гибких интерфейсов. TypeScript позволяет типизировать их через defineComponent с дженериками:

import { defineComponent, h } from 'vue';

export default defineComponent({
  name: 'MyCard',
  slots: {
    header: () => h('div'),
    default: (props: { id: number }) => h('div')
  }
});

В Vue 3 с TypeScript можно также использовать ComponentCustomProps для более точной типизации пропсов слотов, что позволяет безопасно передавать данные и получать автодополнение.

Композиционный API и типизация

При использовании Composition API типизация становится еще более выразительной. Например:

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);

    function increment(): void {
      count.value++;
    }

    return { count, increment };
  }
});

Особенности:

ref<number> обеспечивает строгое соблюдение типа при изменении значения.
TypeScript позволяет безопасно использовать возвращаемые значения в шаблоне компонента.

Интеграция с Quasar UI-компонентами

Quasar-компоненты уже типизированы, что позволяет использовать их с TypeScript без дополнительных деклараций:

<template>
  <q-btn 
    :label="label" 
    :color="color" 
    @click="handleClick"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    label: String,
    color: String
  },
  methods: {
    handleClick(): void {
      console.log('Button clicked');
    }
  }
});
</script>