Создание компонента, который принимает либо 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.
или sfc.vuejs.org
Или codeandbox/ссылка на общедоступный репозиторий github.
Это не идеальное решение, потому что вы должны поместить оба реквизита в один, но это даст вам правильные опечатки в 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: {} }" />
Можете ли вы создать codepen для этого?