defineProps with Typescript type always infer props to "null"

[Kapcash]

Vue version

v3.2.20

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9Uk2P0zAQ/SuDLylSG8NyIrTLIoG0h5VA2gOHNYe0maRmHdv4owVF+e+MnW2VLmgvlj1vZt74zRvYJ2vLQ0RWsbXfOWkDeAzRXgste2tcgAEctjBC60wPBaUWZ+gWlTJPQMnzK/WiBKF3RvsAve9gkxosiin5u3GqeVW8FnrNJz5iokfA3qo6IL0A1lNupeotKr8R7OGHYJygNT/nsSWbplj1tS1/eqPpC0OqFk+AF6yCHEkxmiu9BduHYH3FedT2sSt3puc3hHEXdZA9rhrT37wrr8qrN7yRPszjJfp+tXXm6NERo2DLWXNOwQO6lUPdoEP3Itmz3AvCZ9g/pIlzFHokAc6Kp+1dKtjIQ74A3H65u/sKw5B3MY7pNun6sVSou7CnYC4h+lQz0zhvZu4KqtQd7SNpSyj+zjaQOqBr6x3CN2esnzQntgp8cFJ3H4BzuN+bqBrYIhkq/LFYwX0Gl+SOX1E6bCoILiI5bRupp5866KjU5DASxUuj4TCJBYt8efs+pR6Ne6Re0EqNZC04/fA0AflH0ydPrrR5zA00mAry0Ot8Xi+oWmga9zLxKMP+M7Z1VMEv/le1TJ+mshNzBQ+FsYHmrVVB5ASNc8+z8S/y8zJ8

Steps to reproduce

Using <script setup lang="ts>, the defineProps<PropsType> function does not infer correct props attributes from the Typescript type. It always generate props being null.

1. Create a Typescript type for some props. For instance:

interface PropsType {
     foo: string;
     bar?: number;
}

2. Use this type in the defineProps generic type: defineProps<PropsType>()
3. Take a look at the props object in the transpiled code

What is expected?

The transpiled props object should be

props: {
    foo: { type: String, required: true },
    bar: Number
},

What is actually happening?

This is what is generated since v3.2.20 (it's working fine before that version)

props: {
   foo: null,
   bar: null
},

System Info

N/A

Any additional comments?

You can switch between versions on the playground to see it's a regression from version v3.2.20.

[edison1105]

Type verification is performed only in the development environment and not in the production environment. So the production environment type is changed to null.
However, there is still a problem with this demo. When switching to DEV, it returns an error. This is something we need to solve.(It will be fixed in the repl via vuejs/repl#72)

[unitydynamics]

Two questions related to this issue:

1. Shouldn't the production initialize to undefined rather than null? The distinction is important in some of the code I've written!
2. When I moved to pure Typescript description of my props, I noticed Volar in VS Code will not complain if non-optional props are missing (I also wanted required: true) to get set for variables like foo above. Is there a planned fix to have this behavior in the future? Do I need to submit an issue in the Volar github?

[LinusBorg]

The compiler should actually not create such an output. it should create this:

props: {
    msg: { type: String, required: true },
    labels: { type: Array, required: false }
  },

Thing is: I copied this code from the compiled output for that component when pasted into a real vite projects using the latest version of Vue.

So it seems this is a Playground problem, but not sure if related to the issue @edison1105 linked?

[edison1105]

@LinusBorg
we do not check props type in production since this commit
only Boolean and Function will keep the type in prod.

const props = defineProps<{msg: string}>()
// compiled code is:
props: {
  msg: null
}

so I feel this is by design.

[fsblemos]

This is a problem for component libraries that are used in non TS projects, since after building components don't complain about missing required props. What should I do for consumers to know that there are missing props?

[edison1105]

Closing as this is by design.

[Kapcash]

What's the actual benefit of removing this prop type runtime check in production? Is it purely for performance and bundle size?

Otherwise, maybe it's not worth removing this as it would impact component library usage and confuse users like me regarding the missing checks haha