Vue3+TS子组件无法访问父组件传入对象的found属性

问题出在你给子组件的lettersState props定义了Object类型——TS的Object是最基础的对象类型，仅包含所有对象通用的方法，不包含你自定义的found、miss、hint属性，所以TS会提示找不到found。

以下是两种解决方式：

方式一：定义明确的接口类型 #

在子组件（或单独的类型文件）中创建对应接口，用它约束props类型：

// 子组件代码
interface LettersState {
  found: string[]
  miss: string[]
  hint: string[]
}

const props = defineProps<{ lettersState: LettersState }>()
console.log(props.lettersState.found) // TS可正常识别属性，无报错

方式二：直接在props中声明对象结构 #

如果不需要复用类型，也可以直接在defineProps的泛型里写出对象的具体结构：

// 子组件代码
const props = defineProps<{
  lettersState: {
    found: string[]
    miss: string[]
    hint: string[]
  }
}>()
console.log(props.lettersState.found)

进阶：复用类型（可选） #

如果多个组件需要用到这个类型，可以把它抽离到共享文件中：

// 比如 src/types/letter.ts
export interface LettersState {
  found: string[]
  miss: string[]
  hint: string[]
}

父组件中导入并约束state类型：

import type { LettersState } from '@/types/letter'

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

子组件中导入并使用：

import type { LettersState } from '@/types/letter'

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

内容的提问来源于stack exchange，提问作者FeckNeck