在Vue 3更新后，withDefaults会抛出一个TypeScript错误。

Question

我正在尝试更新Vue 3的版本（3.2.x -> 3.3.x）。

但是由于某种原因，当使用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>

错误信息为：

参数类型 DefineProps<Props, BooleanKey<Props>> 无法分配给参数类型 DefineProps<Readonly<Props> & {}, keyof Readonly<Props> & {}>

我猜我正按照文档中描述的方式进行操作，问题出在哪里？

---

更新：看起来这个问题只发生在非布尔字段上：

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


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

- eXception

---

我在使用Vue 3.3.0的沙盒环境中无法复现你的问题。你能提供关于代码的更多细节吗？这里有一个可工作的示例 - https://codesandbox.io/p/sandbox/brave-cannon-jbnz8n?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A6%2C26 - Fishlex

@Duannx 我已经升级了TypeScript，但仍然收到这个错误信息。 - Manikandan

@Duannx vscode... 我使用的是WebStorm。可能是因为Vue 3.3.x中有一些WebStorm不完全支持的功能，这并不是TypeScript的错误。 - eXception

我认为你应该在Vue项目中创建一个讨论。那里你会得到更好的建议。 - Duannx

类似的问题：https://dev59.com/XlNBsIgBPY-HTNNjawov - LazyOne

Answer 1

这是一个IDE的bug，已经在WEB-61241上进行了跟踪，请关注以获取更新。

作为一种解决方法，您可以尝试下载WebStorm 2023.2 EAP并在首选项 | 语言与框架 | TypeScript | Vue中启用Volar支持。

- lena

---

问题已经解决。这是现在处理Vue类型的宣布方式，不再是一种权宜之计。 - undefined