Типизация слотов в Vue 3: Как исправить ошибку TS7006 в TypeScript

При работе с Vue 3 и TypeScript разработчики часто сталкиваются с ошибкой TS7006: Parameter implicitly has an 'any' type при использовании scoped-слотов. В этой статье разберём, как правильно типизировать слоты и избежать этой проблемы.

Почему возникает ошибка TS7006?

Ошибка появляется, когда TypeScript не может определить тип параметров слота:

<template #export="slotProps">
  <ExportButton v-bind="slotProps" />
</template>

TypeScript выдаёт: TS7006: Parameter 'slotProps' implicitly has an 'any' type

Решение: Явная типизация слотов

Способ 1: Указание типа для объекта

<template #export="props: ExportSlotProps">
  <ExportButton v-bind="props" />
</template>

Способ 2: Деструктуризация с типами (рекомендуется)

<template #export="{
  getVisibleColumns,
  prepareFilterParams,
  page,
  totalItems
}: ExportSlotProps">
  <ExportButton
    :getVisibleColumns="getVisibleColumns"
    :prepareFilterParams="prepareFilterParams"
    :page="page"
    :total-items="totalItems"
  />
</template>

Настройка типов в дочернем компоненте

Для автоматического определения типов добавьте в компонент:

<script setup lang="ts">
import type { VNode } from 'vue'

interface ExportSlotProps {
  getVisibleColumns: () => string[]
  prepareFilterParams: () => Record<string, unknown>
  page: string
  totalItems: number
}

defineSlots<{
  export?: (props: ExportSlotProps) => VNode[]
}>()
</script>

Заключение

Для устранения TS7006:

• Используйте явную типизацию в шаблоне
• Применяйте defineSlots() в дочерних компонентах
• Выносите общие типы в отдельные файлы