Props in vue 3 typescript

Question

I have a component like this, in the propы HEADER I pass the string.

<template>
  <div>
    <section class="pb-5">

      <job-filters-sidebar-checkbox-group
        header="Job types"
        :uniqueValues="uniqueJobTypes"
        :mutation="ADD_SELECTED_JOB_TYPES"
      />

    </section>
  </div>
</template>

In the child component I accept props and specify the type. But the typescript swears at the header in the child component.

<template>
  <accordion :header="header">
    
  </accordion>
</template>

<script lang="ts">
import Accordion from "@/components/Shared/Accordion.vue";
import { defineComponent, ref, PropType } from "@vue/runtime-core";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "JobFiltersSidebarChecbox",
  components: {
    Accordion,
  },
  props: {
    header: {
      type: String as PropType<string>,
      require: true,
    },
    uniqueValues: {
      type: Set as PropType<Set<string>>,
      required: true,
    },
    mutation: {
      type: String,
      required: true,
    },
  },
  setup(props) {...},
});
</script>

Answer 1

change require to required in the header prop definition