vue3.0 的 typescript interface 怎么写？

Question

1. interface如下：

interface DataProps {
      menuData: [{ id: string, systemNm: string, count: string, checked: boolean }],
      topicData: [],
      pageNum: number,
      systemNm: string,
}

2.初始化如下：

    const state: DataProps = reactive({
      menuData: [{ id: "", systemNm: "", count: "", checked: null }],
      topicData: [],
      pageNum: 1,
      systemNm: ''
    });

还是提示不匹配！

Answer 1

使用泛型

const state = reactive<DataProps>({
      menuData: [{ id: "", systemNm: "", count: "", checked: null }],
      topicData: [],
      pageNum: 1,
      systemNm: ''
});

reactive ts类型

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

ts在vue的应用示例：

// props
withDefaults(defineProps<{ msg: string }>(), {
  msg: 'Hello World!'
})
// emit
defineEmits<
  (event: 'click-handle', num: number): void
>()
// reactive
interface UserInfo {
    name: string
    age: number
}
const userInfo = reactive<UserInfo>({
    name: 'CCC的小跟班',
    age: 18
})
// ref
const flag = ref<boolean>(false)
// expose
defineExpose<{childFunc:(num:number) => void}>({
  childFunc
})

Answer 2

menuData 的 check 声明的是 boolean 类型，
但是初始化的时候给的是 null 值，不属于 boolean 类型。
要么把初始值改为 true 或 false，要么把类型改为 boolean | null 或者 boolean | null | undefined。