[Vuejs]-Vue typescript props is dependent on another prop

by

0👍

You would use this syntax:

const props = defineProps<
myRequiredPropName: Props | PropsA
myOptionalPropName?: Props | PropsA
>()

// in your script/setup: props.myRequiredPropName
// in your template: myRequiredPropName

You cannot conditionally require a property and have the typescript compiler catch it.

0👍

Imported types and complex ones are not supported for argument declaration type.

As of now, the type declaration argument must be one of the following to ensure correct static analysis:

  • A type literal
  • A reference to an interface or a type literal in the same file

But you can use PropType utility :

<script lang="ts" setup>

  const props = defineProps({
       propName:{
          type: Object as PropType<Type1 | Type2>
      }

   });
</script>

Leave a comment