使用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. 《最新出炉》系列初窥篇-Python+Playwright自动化测试-37-如何截图-上篇

    1.简介 这个系列的文章也讲解和分享了差不多三分之一吧,突然有小伙伴或者童鞋们问道playwright有没有截图的方法.答案当然是:肯定有的.宏哥回过头来看看确实这个非常基础的知识点还没有讲解和分享. ...

  2. Asp.net平台常用的框架整理

    分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...

  3. linux下进行MCU开发环境搭建

    why 为什么要搭建此开发环境? 在linux环境下开发可以利用shell命令实现对文件的批处理 伟大的程序员应该都用类unix系统! 可以实现对底层编译技术的了解,以便于更好的掌握嵌入式技术 通用性 ...

  4. NC20139 [JLOI2014]松鼠的新家

    题目链接 题目 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在"树& ...

  5. NC50454 A Simple Problem with Integers

    题目链接 题目 题目描述 给定数列 \(a[1],a[2], \dots,a[n]\) ,你需要依次进行q个操作,操作有两类: 1 l r x:给定l,r,x,对于所有 \(i \in[l,r]\) ...

  6. NC16122 郊区春游

    题目链接 题目 题目描述 今天春天铁子的班上组织了一场春游,在铁子的城市里有n个郊区和m条无向道路,第i条道路连接郊区Ai和Bi,路费是Ci.经过铁子和顺溜的提议,他们决定去其中的R个郊区玩耍(不考虑 ...

  7. 【leetcode】合并 k 个有序链表,我给了面试官这 5 种解法

    开胃菜 在进入本节的正题之前,我们先来看一道开胃菜. 题目 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1 ...

  8. PC端应用程序自动化测试——pywinauto、pywin32、pyautogui

    1 前言 PC 端自动化测试使用到的 python 模块主要有 pywinauto.win32gui.pyautogui,主要功能如下: pywinauto:主要使用到 Application 类,用 ...

  9. spring boot整合poi实现excel文件导入导出实战

    今天科比离去,今天肺炎病毒持续肆虐... 意识到生命的脆弱,今天我继续前行,比以往更加坚定和紧迫,这辈子不活好自己就算白来一趟. 1.项目介绍 最近帮朋友做了一个小工具,就是实现:上传一个excel文 ...

  10. spring boot使用自带缓存

    项目地址:https://gitee.com/indexman/spring_boot_in_action 下面就介绍一下如何使用spring boot自带的缓存.按步骤来操作即可,不懂的可以去看项目 ...