Subscribe on changes!

Type checking : component with PropType raises an error when used in "h" function

avatar
Oct 22nd 2020

Version

3.0.2

Reproduction link

https://github.com/d-corler/bricks

Steps to reproduce

  1. Create a component (Brick.ts) and declare a prop with "PropType" type ;
  2. Render this component into another (Grid.ts) with the "h" function.

image

What is expected?

No typing error

What is actually happening?

A typing error occurs

avatar
Oct 25th 2020

This is caused because your core.state.bricks is not of type Brick but Readonly<Brick> image

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
      );
  },
});
avatar
Oct 25th 2020

Works perfectly, thanks @pikax !