Vue3互斥道具

Question

创建一个组件，该组件可以接受json和jsonParserRules，也可以接受jsonUrl和jsonParserRulesUrl，但不能同时接受两者。实现这一目标的正确途径是什么。如果IDE支持此检查并打印适当的警告，这将是完美的，以防指定两个道具。

非工作示例

<script setup lang="ts">
type Props = |
{
  json: Object
  jsonParserRules: Object
  jsonUrl?: never
  jsonParserRulesUrl?: never
}
|{
  json?: never
  jsonParserRules?: never
  jsonUrl: string
  jsonParserRulesUrl: string
}

defineProps<Props>()
</script>

<template>
  <pre>some output</pre>
</template>

这个直接的尝试打印错误：[@vue/compiler-sfc] type argument passed to defineProps() must be a literal type, or a reference to an interface or literal type.

Answer 1

这不是一个完美的解决方案，因为您必须将这两个道具放在一起，但它将在VSCode中给出正确的输入错误。

<script setup lang="ts">
type Json = {
  json: Object;
  jsonParserRules: Object;
};
type JsonUrl = {
  jsonUrl: string;
  jsonParserRulesUrl: string;
};
type Props = {
  jsonData: Json | JsonUrl;
};
const props = defineProps<Props>();
</script>

不给VScode类型记录错误：

<TestCompo :json-data="{ jsonUrl: 'foo', jsonParserRulesUrl: 'foo' }" />

给出VScode类型记录错误：

<TestCompo :json-data="{ jsonUrl: 'foo', jsonParserRules: {} }" />