访问道具 object 属性 Vue 3 + TS

Question

我无法从我的父组件访问我发送的 object 的属性。 在我的子组件中，我想访问 object "lettersState" "found"参见下面的代码）。 当我尝试访问子组件中的"found"时。 参考错误信息

“对象”类型上不存在属性“找到”。

父组件：

const state = reactive({
  guesses: ['', '', '', '', '', ''],
  solution: '',
  currentRow: 0,
  lettersState: {
    found: [] as string[],
    miss: [] as string[],
    hint: [] as string[],
  }
})

<template>
  <Keyboard @handleKeyboard="handleKeyboard" :lettersState="state.lettersState" />
</template>

孩子：

const props = defineProps<{lettersState:Object}>()
console.log(props.lettersState.found)

Answer 1

const props = defineProps<{lettersState:Object}>()

告诉 typescript 你的道具是这样的：

{
  lettersState: {}
}

但是看看:lettersState="state.lettersState"你希望它是：

type LetterState = {
  found: string[]
  miss: string[]
  hint: string[]
}
const props = defineProps<{letterState: LetterState}>()

Answer 2

您正在传递:lettersState="state.lettersState" ，然后您访问console.log(props.lettersState.found) 。 如果你仔细观察，你会发现letterState不存在于你作为 prop 传递的内容中：你只传递了与letterState对应的值。 因此，无需访问letterState密钥。 尝试这个：

const props = defineProps<{
    found: string[],
    miss: string[],
    hint: string[]
  }>()
console.log(props.found)