Subscribe on changes!

Prop validator breaks composition api Setup props object when using typescript

avatar
Jan 13th 2021

Version

3.0.0

Reproduction link

https://codesandbox.io/s/epic-cohen-ddy3e?file=/src/components/TestProps.vue

Steps to reproduce

Removing the validator on the "msg" prop will make the error vanish.

What is expected?

To have access to the prop in the Setup method.

What is actually happening?

Property 'msg' does not exist on type 'Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; slice?: string[] | undefined; ... 16 more ...; flat?: unknown[] | undefined; }> | Readonly<...>'.
  Property 'msg' does not exist on type 'Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; slice?: string[] | undefined; ... 16 more ...; flat?: unknown[] | undefined; }>'.

Locally this is the complete error output:

ERROR in src/components/TestProps.vue:27:23
TS2339: Property 'msg' does not exist on type 'Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; slice?: string[] | undefined; ... 16 more ...; flat?: unknown[] | undefined; }> | Readonly<...>'.
  Property 'msg' does not exist on type 'Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; slice?: string[] | undefined; ... 16 more ...; flat?: unknown[] | undefined; }>'.
    25 |   },
    26 |   setup(props) {
  > 27 |     console.log(props.msg);
       |                       ^^^
    28 |   }
    29 | });
    30 | </script>