Início / coding / Perguntas / 77819388
Accepted
quilkin
Asked: 2024-01-15 19:13:42 +0800 CST

Como usar Enum como tipo de chave para passar propriedades no Vue?

  • 772

Depois de encontrar esse método para usar um enum para definir um objeto, eu queria usar esse objeto no Vue.

export enum Options {
  randSize = 'randomSized',
  timer = 'showTimer',
  randAngle = 'randomAngle',
  colours = 'multiColour',
  cardSize = 'cardSize',
  numCards = 'numCards'
}

(componente pai):

import { Options} from './util'
let options : {[key in Options]: number | boolean} = {
  [Options.randSize]: true,
  [Options.timer] : false,
  [Options.randAngle] : true,
  [Options.colours] : true,
  [Options.cardSize] : 8,
  [Options.numCards] : 20

}

Eu também tenho (graças a este post ) uma maneira de alterar os valores das opções:

function changeOption( option: string, value: number | boolean) {
  options = {...options,[option]:value}
}

mas quando quero usar essas opções como propriedade do componente, o enum não é reconhecido:

(modelo pai):

      <game-options 
        :options = "options"
        @done-setup = "gameStarted=true"
        @change-options="changeOption"
      >
      </game-options>

(componente filho):

import { ref, onMounted } from 'vue'
import { Options} from '../util'

const props = defineProps<{
  options: {[key in Options]: number | boolean}
}>()

onMounted(() =>{
  console.log(props.options);
  let foo = props.options.randSize;
})

dá um erroProperty 'randSize' does not exist on type '{ randomSized: number | boolean; showTimer: number | boolean; randomAngle: number | boolean; multiColour: number | boolean; cardSize: number | boolean; numCards: number | boolean; }'.ts(2339)

Como corrigir isso?

typescript

1 respostas

  1. Best Answer

    Na postagem que você vinculou , diz

    in Enumcompila para valores enum e para chaveskeyof typeof enum .

    Olhando randSizeem seu enum

    export enum Options {
  randSize = 'randomSized',
  ...
}

    a chave é randSizee o valor é randomSized. Então, for {[key in Options]: number | boolean}, o suporte será chamado randomSized, não randSize.

    Ao usar tipos mais complexos, lembre-se de que há algumas limitações rígidas de sintaxe , principalmente, definePropsnão é possível fazer análise de tipo real, apenas resolve a sintaxe. Para mim, nem sempre é claro onde termina um e começa o outro. Nesse caso, definePropsnão é possível resolver o tipo, o Vue só saberá que existe uma optionsprop, mas não tem ideia do seu tipo. Mas como o IDE pode completar o tipo real, ele inferirá o tipo inteiro e fornecerá erros de digitação e preenchimento automático (consulte playground ). Mas o Vue não apresentará erros de digitação. Se isso for aceitável, está tudo bem.

    Observe, no entanto, que isto:

    const props = defineProps<{
  [key in Options]: number | boolean
}>()

    não funcionaria, pois o Vue não consegue resolver a forma real do tipo .

    • 3

relate perguntas