使用vue3.0 对 props 进行复杂类型验证的时候,可以直接用 PropType 进行强制转换:

 

  callback: Function as PropType<()=>void>,

  person: Object as PropType<Person>,

  这里注意一下数组的类型,我一开始这样写:

  list: [] as PropType<AppItemModel[]>,

  结果一直报warning,我就一直改啊改的 也不明白到底哪的问题

  

  后来想不过,对象都是 Object 为啥数组要简写(习惯性简写)呢.....  遂改成 Array 就好了

  list: Array as PropType<AppItemModel[]>,

  data 中的数据能在不显式定义类型的时候推断出大多类型,不用去写

  computed 写上返回计算属性的数据类型就行,保证代码的清晰度和 vue 结构的完整性,typescript写出来的代码看着很舒服

vue3在typescript下对props类型判断的更多相关文章

  1. vue3 、typescript环境, props自定义类型propType

    vue3 .typescript环境, props自定义类型propType //子组件的props类型是复杂的类型的时候,可以用propType进行强制类型转换 //eg 复杂函数,对象数组,对象的 ...

  2. 认真总结Vue3中ref与reactive区别和isRef与isReactive 类型判断

    1.什么是ref? 1.ref和reactive-样 也是用来实现响应式数据的方法 由于reactive必须传递一个对象, 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦 所以V ...

  3. TypeScript 之类型判断

    在使用 Angular 做项目的时候,对 TypeScript 的类型判断不太熟练,为了方便查找,特意对 TypeScript 的类型判断做了简单梳理.文章只是 TS 官网的内容摘要,没有高深的知识, ...

  4. 《Vue3.x+TypeScript实践指南》已出版

    转眼回长沙快2年了,图书本在去年就已经完稿,因为疫情,一直耽搁了,直到这个月才出版!疫情之下,众生皆苦!感觉每天都是吃饭.睡觉.上班.做核酸! 图书介绍 为了紧跟技术潮流,该书聚焦于当下火的Vue3和 ...

  5. 【vue3-element-admin 】基于 Vue3 + Vite4 + TypeScript + Element-Plus 从0到1搭建后台管理系统(前后端开源@有来开源组织)

    vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案,技术栈为 Vue3 + Vite4 + T ...

  6. TypeScript完全解读(26课时)_2.TypeScript完全解读-基础类型

    2.TypeScript完全解读-基础类型 src下新建example文件夹并新建文件.basic-type.ts.截图中单词拼错了.后需注意一下是basic-type.ts 可以装tslint的插件 ...

  7. TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)

    12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...

  8. TypeScript完全解读(26课时)_13.TypeScript完全解读-高级类型(2)

    13.TypeScript完全解读-高级类型(2) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建文件并在index. ...

  9. 【跟着子迟品 underscore】常用类型判断以及一些有用的工具方法

    Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...

  10. 17.C#类型判断和重载决策(九章9.4)

    今天来结束第九章,聊下我们经常忽略,但是编译器会帮我们完成的"类型判断和重载决策",理解编译器如何帮我们完成,相信在写代码时会更明确,避免一些编译出错,排查的问题,让我们开发更给力 ...

随机推荐

  1. docker的架构及工作原理(详解)

    目录 一.docker架构图 二.Client 客户端 三.Host 主机(docker引擎) 四.Image 镜像 五.Container 容器 六.镜像分层 可写的容器层 七.Volume 数据卷 ...

  2. LeetCode贪心算法习题讲解

    实验室的算法课程,今天轮到我给师弟师妹们讲贪心算法,顺便也复习一下. 贪心算法这个名字听起来唬人,其实通常是比较简单的.虽然通常贪心算法的实现非常容易,但是,一个问题是否能够使用贪心算法,是一定要小心 ...

  3. 阿里天池实验室简明教程以及Docker安装使用[一]

    1.天池notebook简介和使用 天池实验室是基于PAI DSW探索版开发的,PAI DSW (Data Science Workshop)是为算法开发者量身打造的云天池实验室是基于PAI DSW探 ...

  4. Windows XP Professional with Service Pack 3 (x86)

    Windows XP Professional with Service Pack 3 (x86) 链接:https://pan.baidu.com/s/1p99vLx5psoq9K4ONlRpkZA ...

  5. 让 JuiceFS 帮你做好「异地备份」

    家住北京西二旗的小张是一家互联网金融公司的运维工程师,金融行业的数据可是很值钱的,任何的损坏和丢失都不能容忍. 为此,小张选了北京品质最高的机房,买了品质最好的硬件,做了全面的数据备份容灾策略: 每 ...

  6. (C语言)1到50的阶乘之和列表,参考用,洛谷:P1009 [NOIP1998 普及组] 阶乘之和

    1到50列表,阶乘之和 S=1!+2!+3!+⋯+n!(n≤50) 1::1 2::3 3::9 4::33 5::153 6::873 7::5913 8::46233 9::409113 10:: ...

  7. Zookeeper-ZKFC的原理和功能

    一.前言 HADOOP2 HA架构引入了ZKFC.Journalnode组件,本篇文章主要介绍ZKFC的功能和原理.HA架构支持两种切换方式: 手动切换:  通过命令实现主备之间的切换,可以用HDFS ...

  8. 【Unity3D】动画回调函数、动画事件、动画曲线

    1 动画回调函数 ​ 动画回调函数是指动画在开始时.执行中.结束时回调的函数,主要有:OnStateEnter.OnStateUpdate.OnStateExit.OnStateMove.OnStat ...

  9. 【framework】AMS启动流程

    1 前言 ​ AMS 即 ActivityManagerService,负责 Activy.Service.Broadcast.ContentProvider 四大组件的生命周期管理.本文主要介绍 A ...

  10. Java8函数式接口Predicate实战

    关于函数式接口 函数式接口 Funcational Interface 是指接口范围内只允许有一个抽象方法(不包括default和static方法)的接口.Java中有一些预定义的函数接口,如Pred ...