How could I set a default props in defineComponent with typescript?

[s3xysteak]

For example:

interface Props {
  doSomething?: () => void
}

export default defineComponent<Props>((props) => {
  props.doSomething()
}, {
  props: {
    doSomething: {
      default: noop
    }
  }
})

So the component has a doSomething props, which should be default as ()=>{}. However, code props.doSomething() throw a type error, because the type of onViewerMounted is Props.onViewerMounted?: (() => void) | undefined

[rtabulov]

you should use the withDefaults marcro, there is an example in docs
https://vuejs.org/api/sfc-script-setup.html#default-props-values-when-using-type-declaration

[s3xysteak]

Could I use marcro in defineComponent? I thought it could only be used in SFC.

[rtabulov]

sorry, i got confused there for a moment. if you are using defineComponent, then you can write something like this

import { defineComponent, h, type PropType } from "vue";

interface Props {
  doSomething?: () => void;
}

const noop = () => {};

export default defineComponent<Props>(
  (props) => {
    props.doSomething();
    return () => {
      // render function or JSX
      return h('div', 'Hello world!');
    }
  },
  {
    props: {
      doSomething: {
        type: Function as PropType<Props["doSomething"]>,
        default: noop,
      },
    },
  },
);

[s3xysteak]

Hey thank you! That works!