types(resolveType): fix defineComponent type error

[mengdaoshizhongxinyang]

When jsx-plugin.resolveType is true, adding emit or slot to defineComponent will in type error.[#8608 ]

fix #8608

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.2 kB	34.4 kB	30.9 kB
vue.global.prod.js	147 kB	53.6 kB	47.9 kB

Usages

Name	Size	Gzip	Brotli
createApp	50.3 kB	19.7 kB	18 kB
createSSRApp	53.7 kB	21 kB	19.1 kB
defineCustomElement	52.6 kB	20.4 kB	18.6 kB
overall	64 kB	24.8 kB	22.5 kB

[pikax]

Thank you for your contribution, do you mind explaining what's the intent of this? It seems you're not following the function declaration described in the docs.

Vue relies on runtime to run validations, etc. Just defining the types is not enough, not sure what "jsx-plugin.resolveType is true" is meant to mean but the test you have written is not correct based on the runtime behaviour won't be functioning as expected.

Look at this example

import { defineComponent, h } from "vue";
export const Test = defineComponent((props) => {
  return () => h('div', props.test || '[unknown]')
}, {})


h(Test, {
  test: 'test'
}) // it will output `[unknown]`

Without declaring the runtime props it won't work.

Also introducing a new type FunctionalContext which is pretty much identical to SetupContext is not a good practice.

I'll be closing this down, if you think I'm wrong, please let me know we can discuss and possibly reopen if needed.

[mengdaoshizhongxinyang]

@pikax jsx-plugin.resolveType is true is this.It surpport this . I also think introducing a new type is not a good practice,but SetupContext is not support this.Is there any better way for me to use this feature?

[pikax]

jsx-plugin.resolveType is true is this

That seems to be a feature of JSX plugin, not vue/core @sxzz can you provide some insight?

It surpport this

That is just purely typescript test, you can test the runtime does not work! playground

import { defineComponent, h, ref } from "vue";
export default defineComponent(
  // TODO: babel plugin to auto infer runtime props options from type
  // similar to defineProps<{...}>()
  <T extends string | number>(props: { msg: T; list: T[] }) => {
    // use Composition API here like in <script setup>
    const count = ref(0)

    return () => h('div', [props.msg, count.value].join(' '))
  },
)

The typescript on vue/core is intended to support all the runtime features, if it doesn't work at runtime, it should not be supported by vue/core types.

[sxzz]

Context: #7963

Evan wants to have a resolve type plugin (just like defineProps<T>()) for non-Vue SFC. So I made Babel plugin babel-plugin-resolve-type. See the JSX playground

The JSX plugin works well but didn't for TypeScript. This PR is aimed at fixing type errors.

See TS Playground