Optional props and exactOptionalPropertyTypes

[jfrs]

I don't know if this is an issue with the language tools, or Vue, or even expected, but when "exactOptionalPropertyTypes": true is set, optional props still have the undefined value in templates.

<script setup lang="ts">
  interface Props {
    reverse?: boolean;
  }

  defineProps<Props>();
</script>

<template>
  {{ reverse }} <!-- (property) reverse?: boolean | undefined -->
</template>

This is currently an issue for me because some components expect optional props so (property) reverse?: boolean, which doesn't work with exactOptionalPropertyTypes.

Using default props also seems to break:

<script setup lang="ts">
  interface Props {
    reverse?: boolean;
  }

  withDefaults(defineProps<Props>(), {
    reverse: false
  });
</script>

<template>
  {{ reverse }} <!-- (property) reverse: boolean | undefined -->
</template>

Should I open an issue for this? (Vue 3.3.8 & Volar/vue-tsc 1.8.22)

[amritk]

Hello, I'm late to the party but I just figured this one out

<script setup lang="ts">
  interface Props {
    reverse?: boolean;
  }

  const props = withDefaults(defineProps<Props>(), {
    reverse: false
  });
</script>

<template>
  {{ props.reverse }} 
</template>

this will give the correct type

[Jognt]

I'm experiencing this as I'm a bit obsessed with the difference between reverse?: boolean and reverse: boolean | undefined in typescript with exactOptionalPropertyTypes enabled.

Glad to know I'm not alone, though it does not seem like it ever got much attention.