javascript - After update of Vue 3 withDefaults throws a TypeScript error - Stack Overflow

admin管理员组

文章数量:1389892

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' });

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' });

• javascript
• typescript
• vue.js
• vuejs3
• webstorm

Share Improve this question Follow edited May 26, 2023 at 14:33 eXception asked May 24, 2023 at 10:35 eXceptioneXception 2,34133 gold badges1919 silver badges3535 bronze badges 7

• 1 I couldn't replicate your problem in a sandbox environment using vue 3.3.0. Can you provide more details about the code? Here is a working example - codesandbox.io/p/sandbox/… – Fishlex Commented May 24, 2023 at 11:43
• Maybe you need upgrade your typescript too – Duannx Commented May 25, 2023 at 2:04
• 1 @Duannx I have upgraded the typescript still I get this error message. – Manikandan Commented May 25, 2023 at 4:27
• 1 I think you should create a discussion in the Vue project. There you will get better advices – Duannx Commented May 25, 2023 at 9:47
• 2 Similar kind of issue: stackoverflow./q/76313288/783119 – LazyOne Commented May 25, 2023 at 15:46

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptAfter update of Vue 3 withDefaults throws a TypeScript errorStack Overflow