Accept undefined as prop when exactOptionalPropertyTypes is enabled in tsconfig

[amritk]

Vue version

3.5.12

Link to minimal reproduction

https://github.com/amritk/vue-exact-optional-property-types

Steps to reproduce

Create a component like so

<script setup lang="ts">
const { hello = 'world' } = defineProps<{ hello?: string }>()
</script>
<template>
  <div>
    <p>{{ hello }}</p>
  </div>
</template>

enable exactOptionalProperties in tsconfig

What is expected?

You should be able to pass undefined into the prop as you can in typescript

const test = (hello: string = 'world') => {
	console.log(hello)
}

test()
test(undefined)

What is actually happening?

It gives an error saying undefined is not assignable to string. However we have a default set so it will end up being a string.

src/App.vue:6:4 - error TS2379: Argument of type '{ msg: undefined; }' is not assignable to parameter of type '{ readonly msg?: string; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Record<string, unknown>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Type '{ msg: undefined; }' is not assignable to type '{ readonly msg?: string; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Types of property 'msg' are incompatible.
      Type 'undefined' is not assignable to type 'string'.

   <HelloWorld :msg="undefined" />

System Info

System:
    OS: Linux 6.13 Arch Linux
    CPU: (20) x64 Intel(R) Core(TM) i9-10900KF CPU @ 3.70GHz
    Memory: 56.07 GB / 62.71 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.asdf/installs/nodejs/22.14.0/bin/node
    npm: 10.9.2 - ~/.asdf/installs/nodejs/22.14.0/bin/npm
    pnpm: 9.15.5 - ~/.asdf/installs/nodejs/22.14.0/bin/pnpm
    bun: 1.2.0 - ~/.bun/bin/bun
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

Is there a way to get this to work like it does in typescript without explicitly setting the type | undefined

[amritk]

Related issue, though not exactly the same #6532

[HotCherryPie]

Hello! This is expected behavior, because this is exactly what this option is for)

type Props = { hello?: string }

const foo: Props = { hello: undefined };

Without exactOptionalProperties: true — no error

With exactOptionalProperties: true — error

What is expected?

You should be able to pass undefined into the prop as you can in typescript

const test = (hello: string = 'world') => {
	console.log(hello)
}


test()
test(undefined)

Since props passed to component as object, Your example is not really relevant to this issue.

[amritk]

But even if I use an object, typescript still allows it as long as I set a default. I know thats what the flag is supposed to mean, but it doesn't seem like typescript behaves that way. Unless I'm misunderstanding it

With exactOptionalProperties: true — no error

const test = ({hello =  'string'} = {}) => {
	console.log(hello)
}
test()
test(undefined)
test({hello: undefined})

[HotCherryPie]

Yes, because in this case TS infers hello type not just optional (hello?: string), but as optional or undefined (hello?: string | undefined), allowing you to omit property or explicitly pass undefined:

Otherwise, if we specify type of the parameter manually without | undefined, we would face exact same error:

So in case where you manually write type definition with exactOptionalProperties: true, you should always specify | undefined if you want to allow undefined as property value, regardless of whether it is optional or not.

[amritk]

oh I see because its optional, thanks for humoring me! I did end up sprinkling undefined everywhere but was just wondering if there was a better way.

Thanks again!