Subscribe on changes!

Slots defined with `SlotsType` in "Functional Signature" `defineComponent` do not get a type

avatar
Nov 21st 2023

Vue version

3.3.8

Link to minimal reproduction

https://play.vuejs.org/#eNqNUsFu2zAM/RXCpwRILGy9DK7Tdit62A7bsPRobHBsJnEnS4JEpykC//soyU2cYAWaQ2CRj+Tjezwkn41Jdx0mWZK7yjaGwCF1BmSpNosiIVckN4VqWqMtwQGWPnmvFeGeZrCUmtzji8EZ1LhuFN5rBipUnNtCD2urWygS7l8k14UqVKWVI/AoWFyWTAoFEP4A/nzI4NDPhsfH7GxuHsNwQsCJSX7wfctO0u2kLqnkPrDWOgNHtlGba1iVNgPVtSu00E8zKNUL9Lyi73IT+k1hMbwnp0/gGik5Pw2LbANRzz2UDDmmFNEDhQwCB9/lFSJE7BZ/v289vo9dcxEd4In8IGyNLAnD/DxItps7XpNd8U3Zl1z4MANycUQnsySaNW9Lkz45rdjawKoYEuwoixJ5Dt5k/LElMi4ToqoVl9Uom51NFZJQphV3DBO2U9S0OK91e3eVXqWfRN04GodTdO18ZfWzQ5saq2vuVCSDSWGW4MwO7dyiqtGife/si7Lx/IvUGQc/flC4Z2XI8QGum82FLhWr2Ei0Pww1fKBn+pRS6udvIUa2w+Mu1Rarv/+JP7l93OmnxcBstD+VdoMU0w/L73zKo2Sr604OXryR/IVOy85zjLAvnaqZ9ggX2H4NNvOxP7qHPaFyr0t5okGNgA9++AN6a/UTXVb7qGL/D4mjYHU=

Steps to reproduce

I have defined a component with functional defineComponent signature and assigned some slots.

<script setup lang="ts">
import { SetupContext, SlotsType, defineComponent, h } from "vue";

const Comp = defineComponent(
  (
    _1: {},
    _2: SetupContext<
      {},
      SlotsType<{ default?(data: { foo: string; bar: number }): any }>
    >,
  ) =>
    () =>
      null,
  {
    slots: Object as SlotsType<{ default: { foo: string; bar: number } }>,
  }
);

h(
  Comp,
  null,
  {
    default: (data) => null,
//            ^? (parameter) data: any
  }
);
</script>

<template>
  <Comp v-slot="data"></Comp>
  <!-- when hovering over `data` it says `data: any` -->
</template>

What is expected?

I would have expected the type of slot prop to be set.

What is actually happening?

Type of slot prop is any, both in h and in <template>

System Info

No response

Any additional comments?

When using regular defineComponent signature by removing the first argument, prop type appears in <template> but not in h.

avatar
Nov 30th 2023

This is caused because Functional components are very barebones, basically what we return is the function with props.

One issue sort of related https://github.com/microsoft/TypeScript/issues/14729, since it would be nice to also add some typing for using in JSX