0

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

Mohammad A. Apu
  • 13
  • 3
  • Different types specified, which I assume is a typo. Otherwise, you need to set a validation function for the prop: https://vuejs.org/guide/components/props.html#prop-validation. – J. Titus Jun 01 '23 at 10:03
  • I'm really sorry for that, my intention was to show that the same type was used, Now updated the question, Btw, the TS error is not there – Mohammad A. Apu Jun 01 '23 at 10:32
  • Have a look at [Vite 4.1.0 compiling and running dev server even if there is typescript error](https://stackoverflow.com/questions/75533382/vite-4-1-0-compiling-and-running-dev-server-even-if-there-is-typescript-error) and [build not picking up TS Errors](https://stackoverflow.com/questions/72545700/vue-3-vite-typescript-dev-build-not-picking-up-ts-errors) – Moritz Ringler Jun 01 '23 at 11:43
  • Doesn't help on my project @MoritzRingler – Mohammad A. Apu Jun 01 '23 at 13:03

1 Answers1

0

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>
Usman
  • 339
  • 3
  • 15
  • I'm sorry! Actually, I'm using correct props in my project, but the TS error is not showing up. (Now updated the question), & this doesn't solves the issue. – Mohammad A. Apu Jun 01 '23 at 10:35