位置: IT常识 - 正文

Vue 之 vue3 与 TS 的配合使用整理(vue3和ts)

编辑:rootadmin
Vue 之 vue3 与 TS 的配合使用整理 目录说明前言配置 tsconfig.json正文TypeScript 与组合式 API为组件的 props 标注类型使用 `<script setup>`语法限制Props 解构默认值非 `<script setup>` 场景下为组件的 emits 标注类型为 ref() 标注类型为 reactive() 标注类型为 computed() 标注类型为事件处理函数标注类型为 provide / inject 标注类型为模板引用标注类型为组件模板引用标注类型TypeScript 与选项式 API为组件的 props 标注类型为组件的 emits 标注类型为计算属性标记类型为事件处理函数标注类型扩展全局属性类型扩展的位置扩展自定义选项说明

推荐整理分享Vue 之 vue3 与 TS 的配合使用整理(vue3和ts),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3和typescript,vue3和typescript,vue3和ts,vue3区别,vue3区别,vue3和ts,vue3和ts,vue3和ts,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要是说明vue3中的一些ts的用法,且**文章内容都是从vue官网整理下来的**,如有重复,请说明,谢谢。

前言配置 tsconfig.jsonVue 之 vue3 与 TS 的配合使用整理(vue3和ts)

通过 create-vue 搭建的项目包含了预先配置好的 tsconfig.json。其底层配置抽象于 @vue/tsconfig 包中。在项目内我们使用 Project References 来确保运行在不同环境下的代码的类型正确 (比如应用代码和测试代码应该有不同的全局变量)。

手动配置 tsconfig.json 时,请留意以下选项:

compilerOptions.isolatedModules 应当设置为 true,因为 Vite 使用 esbuild 来转译 TypeScript,并受限于单文件转译的限制。

如果你正在使用选项式 API,需要将 compilerOptions.strict 设置为 true (或者至少开启 compilerOptions.noImplicitThis,它是 strict 模式的一部分),才可以获得对组件选项中 this 的类型检查。否则 this 会被认为是 any。

如果你在构建工具中配置了路径解析别名,例如 @/* 这个别名被默认配置在了 create-vue 项目中,你需要通过 compilerOptions.paths 选项为 TypeScript 再配置一遍。

正文TypeScript 与组合式 API为组件的 props 标注类型使用 <script setup>

当使用 <script setup> 时,defineProps() 宏函数支持从它的参数中推导类型:

<script setup lang="ts">const props = defineProps({ foo: { type: String, required: true }, bar: Number})props.foo // stringprops.bar // number | undefined</script>

这被称之为“运行时

本文链接地址:https://www.jiuchutong.com/zhishi/300158.html 转载请保留说明!

上一篇:教你一文解决 js 数字精度丢失问题(js遇到的问题)

下一篇:React通过classnames库添加类(react中key)

  • 状态函数有哪些性质(不属于状态函数有哪些)

    状态函数有哪些性质(不属于状态函数有哪些)

  • 为什么电脑桌面图标变成白纸(为什么电脑桌面壁纸换不了)

    为什么电脑桌面图标变成白纸(为什么电脑桌面壁纸换不了)

  • 苹果朋友圈怎么发高清视频(苹果朋友圈怎么设置只可以看三天的)

    苹果朋友圈怎么发高清视频(苹果朋友圈怎么设置只可以看三天的)

  • 拼多多拼单失败了,钱会主动退回来吗(拼多多拼单失败是什么意思)

    拼多多拼单失败了,钱会主动退回来吗(拼多多拼单失败是什么意思)

  • 一寸电子照片怎样改成二寸(一寸电子照片怎么照)

    一寸电子照片怎样改成二寸(一寸电子照片怎么照)

  • 华为nova7截屏怎么截(华为nova7手机截图)

    华为nova7截屏怎么截(华为nova7手机截图)

  • qq密友值在哪看(扣扣密友值在哪里看)

    qq密友值在哪看(扣扣密友值在哪里看)

  • stacks是苹果啥诊断(苹果stacks routined)

    stacks是苹果啥诊断(苹果stacks routined)

  • ppt的副标题怎么删掉(ppt中的副标题)

    ppt的副标题怎么删掉(ppt中的副标题)

  • 电脑立体声混音干嘛用(电脑立体声混音怎么开)

    电脑立体声混音干嘛用(电脑立体声混音怎么开)

  • tft屏幕和ips屏幕区别(tft屏幕和ips屏幕哪个好)

    tft屏幕和ips屏幕区别(tft屏幕和ips屏幕哪个好)

  • 蓝牙耳机lr哪个是左右(蓝牙耳机哪一款好?)

    蓝牙耳机lr哪个是左右(蓝牙耳机哪一款好?)

  • ps怎么去红色印章(怎么去掉ps中的红色)

    ps怎么去红色印章(怎么去掉ps中的红色)

  • word右边竖线怎么去掉(word右侧一条竖着黑线怎么去除)

    word右边竖线怎么去掉(word右侧一条竖着黑线怎么去除)

  • 华为充电器充vivo行吗(华为充电器充vivo手机)

    华为充电器充vivo行吗(华为充电器充vivo手机)

  • 手机qq新朋友怎么删除(手机qq新朋友好友通知怎么删除)

    手机qq新朋友怎么删除(手机qq新朋友好友通知怎么删除)

  • 数据库系统是在什么基础上发展起来的(数据库系统在生活中的应用)

    数据库系统是在什么基础上发展起来的(数据库系统在生活中的应用)

  • 快手直播同城看不到怎么回事(快手直播同城看不见 之前都可以)

    快手直播同城看不到怎么回事(快手直播同城看不见 之前都可以)

  • 蓝墨云签到关闭定位(蓝墨云班课网页怎么签到)

    蓝墨云签到关闭定位(蓝墨云班课网页怎么签到)

  • 华为p30的指示灯的位置(华为p30的指示灯怎么关闭)

    华为p30的指示灯的位置(华为p30的指示灯怎么关闭)

  • 为什么专门开发会议app(为什么要开发rmon)

    为什么专门开发会议app(为什么要开发rmon)

  • OA办公系统是什么(oa办公系统功能介绍)

    OA办公系统是什么(oa办公系统功能介绍)

  • 在bios中屏蔽电脑主板上集成声卡让独立声卡正常工作(bios屏蔽接口)

    在bios中屏蔽电脑主板上集成声卡让独立声卡正常工作(bios屏蔽接口)

  • 企业向红十字会捐赠可以抵扣所得税吗
  • 个人能否申请延迟退休
  • 总资产报酬率的计算公式
  • 无需外汇局审批的账户
  • 给对方汇钱
  • 股东转让股权公司如何做账
  • 三免三减半如何申报企业所得税
  • 机器配件属于什么报销项目
  • 预付房租在资产负债表里为什么属于资产
  • 自行研发的无形资产会计处理
  • 小规模纳税人购置税控设备
  • 公司与公司之间合作协议
  • 未计提职工教育经费汇算清缴
  • 出口退税征税
  • 什么时候需要计提税金及附加
  • 进项税的现金流怎么填
  • 哪些人可以享受4050社保补贴
  • 网上办税服务厅app下载
  • 小规模收到专票要做进项税额转出吗
  • 收入未实现成本怎么进
  • 借给其他企业的钱计入什么科目
  • 法律的禁止性规定
  • 无租使用房产协议
  • 发票已认证次月冲红
  • windows登录提示
  • u盘转移到另一个u盘
  • ps命令不可用
  • 销售折让负数发票如何入账
  • 行政单位跨年度收到发票,补付尾款会计分录
  • 金税盘一定要有吗
  • 完美解决在ThinkPHP控制器中命名空间的问题
  • 数组 php
  • php百分比
  • 进项逾期未认证怎么办
  • elementui表格自定义排序
  • idea2020.2.3创建web
  • php运用
  • 帝国cms到底好不好
  • sqlserver 比较时间
  • python send_from_directory
  • 受托方代收代缴的消费税应计入什么科目
  • 金税四期是什么意思
  • 没有抄税会导致什么情况
  • 公司购买土地建厂房账务处理小企业会计准则
  • 出口企业有哪些税收
  • 增值税发票开错冲红重开如何做会计分录?
  • 联营单位投入的款项
  • 购礼品送客户分账务处理怎么做
  • 未开票收入转为开票收入
  • 以前年度损益调整
  • 事业单位职工福利费
  • 什么叫零售差额退税
  • 年末本年利润没有结转影响报税吗
  • 小规模纳税人做账分录全套流程最新
  • 小规模纳税人公户转私户可以吗
  • 对公账户有资金往来必须入账吗
  • qqprotect.exe是什么进程?qqprotect.exe怎么禁止自动启动?
  • 直接玩鬼泣4
  • FastDFS4和Ubuntu12安装及部署步骤
  • 修改linux启动项
  • RPDFLchr.exe - RPDFLchr是什么进程 有什么用
  • Mac系统中文件的唯一id
  • win8.1卸载软件在哪里
  • httpd: Could not determine the servers fully qualified domain name, using 127.0.
  • Extjs grid panel自带滚动条失效的解决方法
  • 怎么把perl删除干净
  • android 图片
  • 批处理常用命令及用法大全
  • hbuilderx打包app教程
  • angular form表单
  • shell脚本的fi
  • linux运行nginx
  • js代码不生效
  • js动态改变网页标题
  • 二级菜单css代码
  • 如何将python中的列表与数据对齐
  • 国家税务总局全国增值税发票查验平台
  • 河南新乡地税局罗姓病逝
  • 购房发票的发票代码是哪个
  • 如何代扣个人所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设