Vue 3 Typescript not working properly in template section

Question

The project was built with create-vue & has Typescript support.

Vue: 3.3.4, Typescript: 5.0.4

Following is the context

// ComponentA.vue
<script setup lang="ts">

type ComProps = {
  duration?: '0'|'0.5'|'1'|'1.5'|'2'|'2.5',
  // ...
};

const props = defineProps<ComProps>();

// ComponentB.vue
<template>
    <ComponentA duration="2.7" /> // this doens't throws error
</template>`

// vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    checker({
      vueTsc: true,
      terminal: true
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

Expected result is a typescript error as invalid prop passed in component A

Answer 1

Here is the solution, I have modified the ComponentA.vue

// ComponentB.vue
<template>
    <ComponentA duration="2.7" />
</template>

and modified ComponentA.vue

<script setup lang="ts">
        
        type ComProps = {
          duration?: '0'|'0.5'|'1'|'1.5'|'2'|'2.5'
        };
        
        const props = defineProps<ComProps>();
    console.log(props.duration)
</script>