After update of Vue 3 withDefaults throws a TypeScript error

Question

I'm trying to update version of Vue 3 (3.2.x -> 3.3.x).

But for some reason I have an error when using withDefaults:

<script setup lang="ts">
interface Props {
  readonly title: string;
}

// THIS WORKS
const props = defineProps<Props>(); 

// THIS DOESN'T WORK (guess because of withDefaults)
const props = withDefaults(defineProps<Props>(), { title: '' });
...
</script>

The error message is:

Argument type DefineProps<Props, BooleanKey<Props>> is not assignable to parameter type DefineProps<Readonly<Props> & {}, keyof Readonly<Props> & {}>

I guess I'm doing this exactly how it's described in docs, what's the problem here?

---

Update: Looks like this issue happens only for non-boolean fields:

// THIS WORKS
withDefaults(defineProps<{readonly foo: boolean}>(), { foo: true });


// THIS DOESN'T WORK
withDefaults(defineProps<{readonly foo: string}>(), { foo: 'foo' });

Answer 1

This is the IDE bug, tracked at WEB-61241; please follow it for updates

as a workaround, you can try downloading the WebStorm 2023.2 EAP and enabling Volar support in Preferences | Languages & Frameworks | TypeScript | Vue