首页 > 其他分享 >Vue Props 定义类型时报对象属性 unknown 错误

Vue Props 定义类型时报对象属性 unknown 错误

时间:2023-04-14 18:55:13浏览次数:44  
标签:Vue true unknown IWorks Props type 属性

item 对象属性 surface 不存在

如上图所示,在模板中使用 item prop 时,surface 属性是 unknown 类型。下面是 props 类型定义:

type IWorks = Partial<{
  id: string;
  text: string;
  content: string;
  desc: string;
  date: string;
  view: string;
  comm: string;
  digg: string;
  surface: string;
}>;

defineProps({
  item: {
    type: Object as PropType<IWorks>,
    require: true
  },
  index: {
    type: Number,
    required: true
  }
});

IWorks 接口类型所有属性都是可选的(由 Partial 工具类型转换)。测试中发现,如果所有的属性都是可选的,就会出现上图所示的错误,只要其中一个属性是必选的,Vue 模板就可以正常推导。具体原因不知。

通过交叉类型运算符 & 把 IWorks 中任一一个属性变成必选的:

defineProps({
  item: {
    type: Object as PropType<IWorks & { id: string }>,
    require: true
  }
});

标签:Vue,true,unknown,IWorks,Props,type,属性
From: https://www.cnblogs.com/Himmelbleu/p/17319327.html

相关文章

  • Vue之 vue-router
    目录简介安装vue-router使用vue-routerrouter的方法路由跳转方法一使用js控制方法二使用标签控制路由跳转携带参数方法一使用问号携带方法二使用斜杠分隔符携带方法三使用对象的方式跳转方法四标签方式跳转携带参数router与route的区别多级路由路由守卫全局路由守卫前置路由......
  • vue路由传值总结
    路由传值总结1.路由导航:在router.js中配置路由的path为/XXX/:id的方式,在路由跳转的时候,设置路径/XXX/123即可跳转接收通过this.$route.params.id 即可拿到1232.params传参:通过this.$router.push传参,配置name匹配路由name属性,设置params对象,内部为传入......
  • vue中使用jsx
    前言相对来说有些时候用jsx更合适,更灵活些安装依赖有对应的包支持yarnadd--dev@vitejs/plugin-vue-jsx配置插件在vite.config.jsimport{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importvueJsxfrom"@vitejs/plugin-vue-jsx";//ht......
  • vue列表渲染之for循环
    vue列表渲染之for循环前端开发中,如果涉及列表渲染,都会提示或要求每个列表项使用唯一的key,那很多开发者就会直接使用数组的index作为key的值,而并不知道key的原理。那么以下会讲解key的作用以及为什么最好不要使用index作为key的属性值。1、作用在虚拟DOM中,key是虚......
  • vue通过Export2Excel.js进行导入excel,获取数据
    <!--封装的模板下载和导入按钮和功能组件--><template><spanstyle="margin-left:10px"><el-buttonsize="mini"class="el-icon-download"@click="downFiles">下载模板</el-button><el-upload......
  • Vue2总结
    笔记脚手架文件结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态资源││└──logo.png││──component:存放组件││└──HelloWorld.vue│......
  • 2023-04-14 vue之组件全局注册
    新建一个vue文件,随便写点什么,然后在main.js中引入,如下:xxx.vue:<template><viewclass="container"><viewclass="content">登录窗口</view></view></template><script>exportde......
  • Vue3 Vite H5 手写一个横向展开的多级树列表
    最近写h5要做那种稍微复杂一点的树,没找到现成的UI组件库可用,vant的树只有两级不满足,只能自己写ps.选框的选择/反选/半选对父子选项的影响还有bug,留到脑子好的时候再优化效果代码框架是Vue3+Vite+Vant4。复选框用的vant的checkbox,应该也可以换别的或者原生。模板<templ......
  • vue 使用 vue-seamless-scroll 实现LED屏滚动效果
    yarnaddvue-seamless-scroll<divclass="index-roll"><vue-seamless-scroll:data="partnerList":class-option="optionLeft"><ul><liv-for=&quo......
  • vue3微信公众号商城项目实战系列(3)项目初始文件及文件夹简介
    首先我们来看下项目的文件结构图,如下: 各个文件及文件夹作用如下:文件或文件夹名称作用.vscodeVisualStudioCode开发工具的配置信息存放目录,从这个目录可以看出vue3确实是推荐使用vscode作为开发工具的。node_modules项目中用到的包存放目录,当我们用"npminstall......