Взаимоисключающие реквизиты Vue3

Создание компонента, который принимает либо 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.

Можете ли вы создать codepen для этого?

bassxzero 24.11.2022 12:29

или sfc.vuejs.org

ericmp 24.11.2022 12:50

Или codeandbox/ссылка на общедоступный репозиторий github.

kissu 24.11.2022 15:54
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
1
3
105
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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: {} }" />

Другие вопросы по теме