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>;

[KaloudasDev]

Hello! The TypeScript error occurs because createVNode expects static values for props, but you're passing Reactives (Ref). Here are the solutions:

Solution 1: Unwrap Refs with unref()

import { createVNode, render, unref, type ComponentProps } from 'vue';
import Message from './Message.vue';

type MessageProps = ComponentProps<typeof Message>;

export function message(options: MessageProps & { duration?: number }) {
  const { duration = 2, ...props } = options;
  
  const staticProps = Object.fromEntries(
    Object.entries(props).map(([key, value]) => [key, unref(value)])
  );
  
  const vnode = createVNode(Message, staticProps);
  const el = document.createElement('div');
  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" });
}

Solution 2: Type-Safe Props Extraction

import { createVNode, render, unref, type ComponentProps } from 'vue';
import Message from './Message.vue';

type MessageProps = ComponentProps<typeof Message>;

type UnwrapProps<T> = {
  [K in keyof T]: T[K] extends Ref<infer U> ? U : T[K];
};

export function message(options: UnwrapProps<MessageProps> & { duration?: number }) {
  const { duration = 2, ...props } = options;
  const vnode = createVNode(Message, props);
  const el = document.createElement('div');
  render(vnode, el);
}

Solution 3: Runtime Type Guard

export function message(options: MessageProps & { duration?: number }) {
  const { duration = 2, ...props } = options;
  
  const processedProps = {};
  for (const [key, value] of Object.entries(props)) {
    processedProps[key] = unref(value);
  }
  
  const vnode = createVNode(Message, processedProps);
  const el = document.createElement('div');
  render(vnode, el);
}

Solution 4: Accept Both Static and Reactive Props

import type { MaybeRef } from 'vue';

type MessageOptions = {
  [K in keyof MessageProps]: MaybeRef<MessageProps[K]>;
} & { duration?: number };

export function message(options: MessageOptions) {
  const { duration = 2, ...props } = options;
  
  const staticProps = {};
  for (const [key, value] of Object.entries(props)) {
    staticProps[key] = unref(value);
  }
  
  const vnode = createVNode(Message, staticProps);
  const el = document.createElement('div');
  render(vnode, el);
}

Recommended Approach:
Use Solution 1 with unref() as it's the most straightforward and maintains type safety while handling both static and reactive values properly.

The key insight is that createVNode expects static prop values, so any Reactive references need to be unwrapped before passing them as props.