The props type in the setup function may need to be more precise.

[nooooooom]

We know that Vue will assign undefined to props that do not have a default value, but it still exists in propsOptions in the form of key value, and for TypeScript, optional parameters and parameters are of other types or undefined are two different definitions , It caused me to use toRefs for props in the setup function to make the parameters in the props become Ref | undefined, and I had to make assertions on the parameters, but it actually exists.

type Props = {
  a?: number
  b: number | undefined
}

type ToRefsProps = ToRefs<Props>

They are like Props.a and Props.b，In Vue, my parameters exist in the type of Props.b, but in the setup I get the type like Props.a.

[ygj6]

I thought this might help you vuejs #9358
vuejs/core#3948 (comment)

[nooooooom]

Hi,
Thank you for finding the same type of question for me. I found a solution to another type of problem, The solution to this problem is to add a require parameter, so it may be different from my current environment. The environment is a bit different, and still can't solve the problems caused by this type.

I am sorry that my problem description is not very clear. I have been planning to improve my problem description but I forgot about it because the work is too busy.

So now I re-describe the situation I encountered. We may set props to a certain type, but we will not set the default value for it nor set require to true, so when Vue is parsing props, unless Its type definition contains Boolean, otherwise the value may be undefined.

But when Vue is writing types, Props without default values ​​are parsed into optional types. This is necessary when the component is referenced, because we do not need to set the value for the optional prop, and the IDE will not throw an exception error, which can reduce the operation of manually setting an undefined for the optional value

But if I refer to props in setup (or elsewhere), the type of props I get is still as described above, and I will get an absent prop. As shown in the following code.

const props = {
  mergedPrefixCls: String,
  value: String,
  onChange: {
    type: Function,
    default: () => {}
  }
}

defineComponent({
  name: 'AComponent',
  props,
  setup(props) {
    // My props should look like this, the value of absent is assigned to undefined and stored in props
    props === {
      mergedPrefixCls: undefined,
      value: undefined,
      onChange: () => {}
    }

    // But I got my props type like this，Optional value is not defined above props
    {
      mergedPrefixCls?: undefined
      value:? undefined
      onChange: () => {}
    }
  }
})

We know that because Vue2 uses Object.defineProperty as a responsive implementation tool, it needs to store the absent props on the props when registering, so what I got is actually a complete props. But because the definition of the type makes the props look incomplete, when I use toRefs, I get a collection of Ref<any> | undefined instead of Ref<any | undefined>. I have to use it every time It is time to make a non-empty assertion on props that may be absent.

[github-actions]

Stale issue message