TypeScript определения

Element Plus предоставляет полноценную поддержку TypeScript, что позволяет использовать строгую типизацию компонентов, пропсов и событий. Правильное использование типов повышает надежность кода и улучшает автодополнение в редакторах.

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

Каждый компонент Element Plus имеет заранее определенные интерфейсы для своих пропсов. Например, для компонента ElButton тип пропсов определяется как:

import type { ButtonProps } from 'element-plus'

const props: ButtonProps = {
  type: 'primary',
  size: 'medium',
  disabled: false,
}

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

  • type может быть 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'.
  • size ограничен 'large' | 'medium' | 'small' | 'mini'.
  • Типизация предотвращает передачу некорректных значений и позволяет автодополнение IDE подсказывать допустимые варианты.

События компонентов

Компоненты Element Plus используют строго типизированные события. Для компонента ElInput это выглядит так:

import type { InputEmits } from 'element-plus'

const handleInput = (value: string) => {
  console.log(value)
}

const emits: InputEmits = {
  input: handleInput
}

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

  • События имеют заранее определенные типы параметров.
  • TypeScript гарантирует, что передаваемые значения соответствуют ожидаемым типам.
  • Автодополнение в редакторе подсказывает доступные события, что сокращает ошибки при разработке.

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

Слоты в Element Plus также поддерживают TypeScript. Например, для компонента ElTable:

import type { TableColumnCtx } from 'element-plus'

<el-table :data="tableData">
  <el-table-column prop="name" label="Имя">
    <template #default="{ row }">
      <span>{{ (row as TableColumnCtx).name }}</span>
    </template>
  </el-table-column>
</el-table>

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

  • Каждый слот имеет контекст с типами полей.
  • TypeScript позволяет безопасно обращаться к данным строки.
  • Можно использовать кастомные интерфейсы для более сложной типизации.

Использование defineComponent и Generic типов

Для полного контроля типов компонентов рекомендуется использовать defineComponent с указанием Generic типов пропсов, слотов и событий:

import { defineComponent } from 'vue'
import type { ButtonProps, ButtonEmits } from 'element-plus'

export default defineComponent<ButtonProps, {}, ButtonEmits>({
  props: {
    type: String,
    size: String,
  },
  emits: ['click'],
  setup(props, { emit }) {
    const handleClick = () => emit('click')
    return { handleClick }
  }
})

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

  • Строгая проверка типов пропсов и событий.
  • Поддержка автодополнения в IDE для всех аспектов компонента.
  • Возможность расширять стандартные типы Element Plus при необходимости.

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

В случаях создания оберток над Element Plus компонентами рекомендуется создавать свои интерфейсы:

import type { SelectProps } from 'element-plus'

interface CustomSelectProps extends SelectProps {
  customOptionStyle?: string
}

export default defineComponent<CustomSelectProps>({
  props: {
    customOptionStyle: String,
  },
})

Плюсы подхода:

  • Сохраняется совместимость с Element Plus.
  • Дополнительные свойства строго проверяются TypeScript.
  • Легко комбинировать стандартные и кастомные пропсы.

Типизация динамических данных

Для компонентов, работающих с массивами данных, можно использовать обобщения:

import type { TableProps } from 'element-plus'

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

const tableProps: TableProps<User> = {
  data: [
    { id: 1, name: 'Иван', email: 'ivan@example.com' }
  ],
}

Выводы по динамическим типам:

  • Каждый ряд таблицы строго типизирован.
  • Любая попытка использовать поле, отсутствующее в интерфейсе, вызывает ошибку на этапе компиляции.
  • Это особенно полезно для сложных таблиц с вложенными объектами и кастомными рендерами.

Поддержка TypeScript в утилитах и функциях Element Plus

Библиотека предоставляет типы для утилит, например, для уведомлений:

import { ElNotification } from 'element-plus'
import type { NotificationParams } from 'element-plus'

const options: NotificationParams = {
  title: 'Успех',
  message: 'Операция выполнена',
  type: 'success',
}

ElNotification(options)
  • Параметры уведомления строго типизированы.
  • TypeScript предотвращает ошибки передачи некорректных типов, таких как type: 'errorr'.

Эти подходы к типизации позволяют максимально безопасно использовать все возможности Element Plus в проектах на TypeScript, снижая количество ошибок и обеспечивая удобство разработки.

Оглавление