Skibardin Code

Метка: TS7006

  • Типизация слотов в 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() в дочерних компонентах
    • Выносите общие типы в отдельные файлы