typescript - Använd enum för standardvärde på defineProps

Den här koden fungerade alldeles utmärkt med vue3 och typescript:

<script lang="ts">
import Vue, { PropType } from 'vue'

enum Position {
  TOP = 'top',
  RIGHT = 'right',
  BOTTOM = 'bottom',
  LEFT = 'left',
}

export default {
  props: {
    position: {
      type: String as PropType<Position>,
      default: Position.BOTTOM,
    },
  },
};
</script>

Men motsvarande kod i <script setup>-syntax:

<script setup lang="ts">
enum Activator {
    PERSIST = 'persist',
    DEMAND = 'demand',
    HOVER = 'hover'
}

type Props = {
    activator?: Activator
}

const props = withDefaults(defineProps<Props>(), {
    activator: Activator.HOVER
});
</script>

Skriptet har mindre standardkod men fungerar inte heller utan ett fel:

Fel: [@vue/compiler-sfc] `defineProps()` i kan inte referera till lokalt deklarerade variabler eftersom det kommer att flyttas utanför setup()-funktionen. Om dina komponentalternativ kräver initialisering i modulens omfång, använd en separat vanlig för att exportera alternativen istället. ``` App.vue 13 | 14 | const props=withDefaults(defineProps(), { 15 | activator: Activator.HOVER | ^^^^^^^^^16 | }); 17 | at Se (https://sfc.vuejs.org/assets/index.8aa136ef.js:137:75) at https://sfc.vuejs.org/assets/index.8aa136ef.js:141:1419 at Object.enter (https://sfc.vuejs.org/assets/index.8aa136ef.js:76:6842) ```

Är det inte möjligt att använda enums för standardvärde med script setup? Playground

REDIGERA: Det verkar som att efter att jag exporterar typen från andra filer kraschar det inte. Jag kommer att undersöka lite mer.

Svar #1

Definiera enum i ett annat (icke-setup) skript.

<script setup lang="ts">


type Props = {
    activator?: Activator
}
  

const props = withDefaults(defineProps<Props>(), {
    activator:  Activator.HOVER·
});

</script>

<script lang="ts"> // here
enum Activator {
    PERSIST = 'persist',
    DEMAND = 'demand',
    HOVER = 'hover'
}
</script>

<template>
  <h1>hello world</h1>
</template>

Svar #2

Det verkar som att denna syntax inte stöder enum enligt detta

Från och med nu måste typdeklarationsargumentet vara ett av följande för att säkerställa korrekt statisk analys:

• En typliteral
• En referens till ett gränssnitt eller en typbokstav i samma fil

Du kan använda en grundläggande typ :

<script setup lang="ts">
type Activator = "persist" | "demand" | "hover";
type Props = {
  activator?: Activator;
};

withDefaults(defineProps<Props>(), {
  activator: "demand",
});
</script>

<template>
  <div>{{ activator }}</div>
</template>