Vue3中使用ts，赋值VNode类型报错

Question

接口定义

给变量b赋值VNode类型报错，赋值对象字面量不报错

报错

请问一下这个报错是什么原因呢，需要怎么修改呢

Answer 1

类型不兼容，直接去掉 const b: ObjectData = .. 中的 : ObjectData，ts可以推断出 b 的类型, 所以不需要额外的类型声明

Answer 2

options?: { text: string | VNode, value: any }[];

const fontFamilyArr = [
  { text: '宋体', value: '"SimSun","STSong"' },
  { text: '黑体', value: '"SimHei","STHeiti"' },
  { text: '楷体', value: '"KaiTi","STKaiti"' },
  { text: '仿宋', value: '"FangSong","STFangsong"' }
]

const fontFamilyOptions = fontFamilyArr.map(font => {
  return {
    value: font.value,
    text: h('span', { style: { fontFamily: font.value } }, font.text)
  }
})

import { defineComponent } from 'vue'
const RenderVnode = defineComponent({
  props: {
    vNode: {
      type: [Object, String],
      required: true
    }
  },
  render() {
    return this.vNode
  }
})
export default RenderVnode

import RenderVnode from './RenderVnode'
components; {
  RenderVnode
}
<render-vnode :vNode="option.text" />