Subscribe on changes!

props `required` would lose when write props object outside `defineComponent`

avatar
Sep 11th 2022

Vue version

3.2.39

Link to minimal reproduction

https://github.com/Dedicatus546/vue-props-required-invalid

Steps to reproduce

  • install dep
  • see src/components/Comp1.tsx and src/components/Comp2.tsx

What is expected?

in src/components/Comp2.tsx props.name would be string instead of string | undefined.

What is actually happening?

in src/components/Comp2.tsx props.name is string | undefined.

System Info

System:
    OS: Windows 10 10.0.22622
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 2.86 GB / 15.92 GB
  Binaries:
    Node: 16.13.1 - D:\nodejs\node.EXE
    npm: 8.1.2 - D:\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.590.0), Chromium (105.0.1343.33)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.2.37 => 3.2.39

Any additional comments?

if we should make required as true , and it work well.

is it type bug for vue, or maybe the way i use is error?

avatar
Sep 11th 2022

TS infers the required property of this plain object as boolean, not true - because other code could change that initial value.

Thats why the prop cant be correctly inferred.

Solution: use as const to tell TS this object wont change.

const props = {
  // ...
} as const
avatar
Sep 12th 2022

@LinusBorg Thanks, it work well.