typescript - Vue3 ömsesidigt uteslutande egenskaper

Skapa en komponent som accepterar antingen json med jsonParserRules eller jsonUrl med jsonParserRulesUrl, men inte båda. Vad är det korrekta sättet att uppnå detta? Det vore perfekt om IDE:n stödjer denna kontroll och visar en lämplig varning om båda egenskaperna anges.

Icke fungerande exempel

<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>

Detta enkla försök skriver ut fel: [@vue/compiler-sfc] typargument som skickas till defineProps() måste vara en litteral typ, eller en referens till ett gränssnitt eller litteral typ.

Svar #1

Detta är inte en perfekt lösning eftersom du måste sätta båda props i en, men det kommer att ge dig de korrekta typfel i 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>

Ger inte VScode TypeScript-fel:

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

Ger VScode TypeScript-fel:

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