withDefaults on a required prop should throw a warning

[TheDutchCoder]

Vue - Official extension or vue-tsc version

2.0.10

VSCode version

1.92.2

Vue version

3.4.31

TypeScript version

5.5.4

System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 99.94 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.7.0 - ~/.nvm/versions/node/v20.7.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.7.0/bin/npm
  Browsers:
    Chrome: 127.0.6533.120
    Edge: 127.0.2651.105
    Safari: 17.6

Steps to reproduce

Just declare props in a TS-based component, but make a prop required and have a default. There's a few issues with this:

1. Required props shouldn't have default value, so the IDE should warn against that
2. When using the component, the IDE no longer warns you about missing required props
3. The browser does warn you against missing required props

The bottom line is that the user isn't aware of the problem anywhere during development until the open the browser console (and even then it's not clear what the issue is: a default value on a required prop)

const props = withDefaults(defineProps<{
  content: string
}>(), {
  content: 'test'
})

What is expected?

1. The IDE to either warn on the content: string line or on the content: 'test' line
2. The IDE to show missing required props during implementation

What is actually happening?

Nothing, which doesn't make the user aware that a required prop is missing during implementation.

Link to minimal reproduction

No response

Any additional comments?

No response

[TheDutchCoder]

Here's a reproduction on the Playground.

Comp2 has the squiggly lines and shows the missing required prop error (as well as the browser warning). If you comment out Comp2, you'll see that Comp1 does not have the squiggly lines but the browser still shows the warning.

I wonder if this is a Vue compiler problem instead?

[KazariEX]

Using vue@3.5 locally should show error.

[KazariEX]

And you might need to update Vue - Official to the latest version (2.0.28).

[TheDutchCoder]

Using vue@3.5 locally should show error.

It doesn't (see Playground)

[KazariEX]

Debugging on the playground is difficult, please try it locally and ensure that tsconfig.json contains the following options:

"vueCompilerOptions": {
    "target": 3.5
}

[TheDutchCoder]

Even with 3.5 (which is in beta btw, not something Nuxt supports) it still doesn't properly show errors. Here are screenshots for the different situations:

Required prop - without default (correct: error)

Required prop - with default (incorrect: no error)

[KazariEX]

Weird, it works on my machine.

Check if the declaration file points to the correct version? It should include MakeDefaultsOptional that controls this behavior.

[TheDutchCoder]

I'm not sure what I'm supposed to check (and where).

Side note: the VSCode extension only has version 2.0.10 available, no other versions are released as far as VSCode can tell, maybe that's the issue? (An older version of the tools?)

[TheDutchCoder]

Yup that's the issue! It was stuck on that version and never updated it. I just uninstalled and did a clean re-install and now it works. Looks like something went awry with publishing versions at some point? 🤔

I'll update all my workspaces, and close the issue, thanks!