How to fix ts check?

[boobam22]

demo

createVNode seems to accept Ref as props, even default props like class, just like using component in template.
but ts raise error when use Ref

type MessageProps = InstanceType<typeof Message>['$props']
export function message(options: MessageProps & { duration?: number }) {
  ...
  const { duration=2, ...props} = options
  const vnode = createVNode(Message, props)
  render(vnode, el)
  ...
}

const msg = ref('Hello World!')
function onClick(){
  message({duration: 1})
  message({title: "title", duration: 2})
  message({title: msg, duration: 3, class: "bg"})
}

[Shyam-Chen]

Use https://github.com/vuejs/language-tools/tree/master/packages/component-type-helpers.

npm: vue-component-type-helpers

import type { ComponentProps } from 'vue-component-type-helpers';

import MyComp from './MyComp.vue';

type MyCompProps = ComponentProps<typeof MyComp>;