Type checking : component with PropType raises an error when used in "h" function
Version
3.0.2
Reproduction link
https://github.com/d-corler/bricks
Steps to reproduce
- Create a component (Brick.ts) and declare a prop with "PropType" type ;
- Render this component into another (Grid.ts) with the "h" function.
What is expected?
No typing error
What is actually happening?
A typing error occurs
This is caused because your core.state.bricks
is not of type Brick
but Readonly<Brick>
If you want to have the correct type you need to update to use as PropType<DeepReadonly<Brick>>
import { DeepReadonly, defineComponent, h, PropType } from "vue";
import { Brick } from "@/plugins/manager/core";
export default defineComponent({
name: "Brick",
props: {
brick: {
type: Object as PropType<DeepReadonly<Brick>>,
required: true,
},
},
setup(props) {
return () =>
h(
"div",
{
style: {
background: "blue",
width: "10px",
height: "10px",
},
},
props.brick.id
);
},
});