当前位置: 首页 > news >正文

ts语法如何在Vue3中运用?

一、父子传值的用法

父传子:defineProps的TS写法

// 父组件:和 vue2 一样正常传值
<template><div class="login-page"><cp-nav-bar title="登录" right-text="注册"></cp-nav-bar></div>
</template>
// 子组件:接收
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{title: stringrightText?: string // ?表示可传可不传
}>()
// js中使用
console.log(props.title)
</script><template><!-- 模板中直接使用变量名 --><van-nav-barfixedleft-arrow:title="title":right-text="rightText"></van-nav-bar>
</template>

补充:

如果需要给 props 设置默认值,需要使用 withDefaults 函数:

const props = withDefaults(defineProps<{title?: stringrightText?: string
}>(),{title: '首页'
})// 以上代码通过语法糖解构,可以优化成如下代码:
const { title, title= "首页" } = defineProps<{title?: stringrightText?: string
}>();

子传父:defineEmits的TS写法

// 子传
const emit = defineEmits<{(e: 'changeMoney', money: number): void(e: 'changeCar', car: string): void
}>()// 父组件:和 vue2 一样正常接收
// @changeMoney="方法名"

二、ref/reactive的TS用法

1.简单数据类型可以不定义ts类型

ref() 会隐式的依据数据推导类型

// const money = ref<number>(10)const money = ref(10)

 2.如果是复杂类型,建议用泛型

type Todo = {id: numbername: stringdone: boolean
}
const list = ref<Todo[]>([])
list.value = [{ id: 1, name: '吃饭', done: false },{ id: 2, name: '睡觉', done: true }
]

三、computed的TS用法 

推荐泛型,一行搞定

const total = computed<string>(() => (count.value * 2).toFixed(2));

四、非空断言

1.可选链

<script setup lang="ts">
import { onMounted, ref } from 'vue';const input = ref< HTMLInputElement | null >(null)onMounted(()=>{// 如果获取的元素不是input,就可能没有value值console.log(input.value?.value);
})
</script><template><div>App组件</div><input type="text" ref="input" value="abc">
</template>

2.非空断言

  // 一定要确定不为空!!!console.log(input.value!.value)input.value!.value = '123'

五、自定义TypeScript类型声明文件

1.给JS文件提供类型

在导入 .js 文件时,TS 会自动加载与 .js 同名的 .d.ts 文件,以提供类型声明。

具体步骤如下:

1.declare 关键字:用于类型声明,为其他地方(比如,.js 文件)已存在的变量声明类型,而不是创建一个新的变量。

2.对于 type interface 等这些明确就是 TS 类型的(只能在 TS 中使用的),可以省略 declare 关键字。

3.其他 JS 变量,应该使用 declare 关键字,明确指定此处用于类型声明。

// 参考示例:自定义组件的类型,必须是同名的.d.ts文件
import CpIcon from '@/components/CpIcon.vue'declare module 'vue' {interface GlobalComponents {CpIcon: typeof CpIcon}
}

 

 2.共享类型

如果多个 .ts 文件中都用到同一个类型,此时可以创建 .d.ts 文件提供该类型,实现类型共享。

1.创建 index.d.ts 类型声明文件。

2.创建需要共享的类型,并使用 export 导出(TS 中的类型也可以使用 import/export 实现模块化功能)。

3.在需要使用共享类型的 .ts 文件中,通过 import 导入即可(.d.ts 后缀导入时,直接省略)。

相关文章:

ts语法如何在Vue3中运用?

一、父子传值的用法 父传子&#xff1a;defineProps的TS写法 // 父组件&#xff1a;和 vue2 一样正常传值 <template><div class"login-page"><cp-nav-bar title"登录" right-text"注册"></cp-nav-bar></div> &…...

RK3566添加湿度传感器以及浅析hal层

RK3566添加一款温湿度传感器gxht3x.挂在i2c总线下。驱动部分就不多做解析。大致流程硬件接好i2c线以及vcc gnd。后看数据手册。初始化寄存器&#xff0c;然后要读数据的话读那个寄存器&#xff0c;读出来的数据要做一个转化,然后实现open read write ioctl函数就行了。本文主要…...

看了这份Java高级笔试宝典覆盖近3年Java笔试中98%高频知识点,反打面试官

首先声明&#xff1a; 本书覆盖了近3年程序员面试笔试中超过98%Java高频知识点&#xff0c;当你细细品读完本书后&#xff0c;面试都是小问题。 一书在手/工作不愁 记住重点&#xff0c;考试要考 前言 程序员求职始终是当前社会的一个热点&#xff0c;而市面上有很多关于程…...

从0到1搭建大数据平台之监控

大家好&#xff0c;我是脚丫先生 (o^^o) 大数据平台设计中&#xff0c;监控系统尤为重要。 它时刻关乎大数据开发人员的幸福感。 试想如果半夜三更&#xff0c;被电话吵醒解决集群故障问题&#xff0c;那是多么的痛苦&#xff01;&#xff01;&#xff01; 但是不加班是不可…...

采购评标管理过程是怎样的?有哪些评标标准?

采购活动的评标是检查和比较投标的有组织的过程&#xff0c;以选择最佳报价&#xff0c;努力获得实现企业目标所需的货物、工程和服务。 评标是由一个被称为评标小组的机构负责。这个小组如何称呼&#xff0c;取决于企业的情况。同义词有报价审查小组、投标审查委员会或投标审…...

《Vue+Spring Boot前后端分离开发实战》专著累计发行上万册

杰哥的学术专著《VueSpring Boot前后端分离开发实战》由清华大学出版社于2021年3月首次出版发行&#xff0c;虽受疫情影响但热度不减&#xff0c;受到业界读者的热捧&#xff0c;截至今日加印5次&#xff0c;累计发行12000册&#xff0c;引领读者开发前后端分离项目&#xff0c…...

类与类之间的关系有哪几种?

文章目录程序设计要素1.可读性2.健壮性3.优化4.复用性5.可扩展性设计类的关系遵循的原则1、 高内聚低耦合2、面向对象开发中 “针对接口编程优于针对实现编程”&#xff0c;”组合优于继承” 的总体设计类与类之间的关系&#xff08;即事物关系&#xff09; A is-a B 泛化&…...

LeetCode 606.根据二叉树创建字符串,102.二叉树的层序遍历和牛客 二叉搜索树与双向链表

文章目录1. 根据二叉树创建字符串2. 二叉树的层序遍历3. 二叉搜索树与双向链表1. 根据二叉树创建字符串 难度 简单 题目链接 解题思路&#xff1a; 这里的意思就是&#xff1a;用前序遍历遍历这颗树。然后左子树和右子树分别在一个括号里。括号里的规则是&#xff1a; 1.左右都…...

02-18 周六 图解机器学习之SMV 第五章5-2

02-18 周六 图解机器学习之SMV 第五章5-2时间版本修改人描述2023年2月18日11:47:18V0.1宋全恒新建文档 环境 程序的基本环境&#xff0c;是使用了jupyter&#xff0c;在容器中运行的。 简介 本程序主要演示支持向量的获取&#xff0c;支持向量是距离超平面最近的点组成的。程序…...

Spring Boot系列--创建第一个Spring Boot项目

1.项目搭建 在IDEA中新建项目&#xff0c;选择Spring Initializr。 填写项目信息&#xff1a; 选择版本和Spring Web依赖&#xff1a; Spring Web插件能为项目集成Tomcat、配置dispatcherServlet和xml文件。此处选择的版本若为3.0.2的话会出现如下错误&#xff1a; java: …...

手把手教你用React Hook和TypeScript从零实现虚拟滚动列表组件

前言 k8s 全称 kubernetes&#xff0c;这个名字大家应该都不陌生&#xff0c;k8s是为容器服务而生的一个可移植容器的编排管理工具&#xff0c;集应用的部署和运维&#xff0c;负载均衡&#xff0c;服务发现和扩容&#xff0c;版本回滚于一身&#xff0c;越来越多的公司正在拥…...

界面控件DevExpress WPF Pivot Grid——拥有强大多维数据分析能力!

界面控件DevExpress WPF的Pivot Grid组件是一个类似excel的数据透视表&#xff0c;用于多维数据分析和跨选项卡报表生成。它拥有众多的布局自定义选项&#xff0c;允许开发者完全控制其UI且以用户为中心的功能使其易于部署。PS&#xff1a;DevExpress WPF拥有120个控件和库&…...

python字典及基础操作

1) 字典是没有顺序的&#xff0c;是任意对象的无序集合。 2) 字典的键是唯一的&#xff0c;不能多次出现&#xff0c;多次出现时取最后一个值。 3) 键是不可变的。 4) 字典中的元素可增删。 5) 因为没有顺序&#xff0c;所以不存在索引。 1. 字典元素的访问 >>> …...

Windows Server 2008 R2安装onlyoffice【docker】

目录 前言 准备工作 安装docker 安装onlyoffice 常见问题 前言 目前docker for windows只能在windows10/11上安装&#xff0c;其他的windows版本只能使用Docker Toolbox来安装&#xff0c;使用该工具安装的docker其实是借助了Oracle VM VirtualBox虚拟机来运行的&a…...

JVM学习笔记六:运行时数据区之堆

目录 概述 堆空间内部结构 JDK7版本 JDK8版本 堆空间的内存划分 堆空间大小设置参数 概述 Java堆是虚拟机所管理的内存中最大的一块&#xff0c;其在JVM启动时即被创建&#xff0c;并且空间大小也被确定&#xff08;这里是不考虑Java8之后以本地内存来实现的元空间&…...

usb闪存驱动器数据恢复该怎么进行?3个方法总结

“怎么办&#xff1f;我的USB驱动器不知道因为什么原因&#xff0c;里面的数据、文件都消失了。有没有什么方法在没有进行备份的情况下恢复从U盘丢失的数据&#xff1f;” USB驱动器作为最常用的存储移动设备&#xff0c;里面保存着各种文件数据。但是有时会出现损坏而导致数据…...

DAX 微信 markdown 编辑器

DAX 微信 markdown 编辑器 一、致谢 感谢开源项目&#xff1a; md wechat-format 感谢 WordPress 插件 Mine云点播 作者 mine27 的指导。 二、如何使用 打开如下地址&#xff0c;直接编辑&#xff0c;可以实时看到符合微信公众号排版的效果。 推荐访问&#xff1a;https://j…...

湖南中创教育为学员提供方便快速的退费服务

2006年&#xff0c;湖南中创教育科技有限公司创始人团队开始创业进入职业教育行业&#xff1b;2014年公司正式成立&#xff0c;组建专业团队并转型升级“互联网”&#xff0c;进入在线教育行业。 自主研发“中创网校”学习平台&#xff0c;为学员提供了集直播、视频回放复习、…...

Java 给视频添加背景音乐 | Java工具

目录 前言 Maven依赖 环境依赖 代码 总结 前言 本文提供给视频添加背景音乐的java工具&#xff0c;一如既往的实用主义。 Maven依赖 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.1.1…...

【JUC2022】第二章 多线程锁

【JUC2022】第二章 多线程锁 文章目录【JUC2022】第二章 多线程锁一、乐观锁与悲观锁1.悲观锁2.乐观锁二、八锁案例1.标准情况&#xff0c;有a、b两个线程&#xff0c;请问先打印邮件还是短信【结果&#xff1a;邮件】2.sendEmail方法中加入暂停3秒钟&#xff0c;请问先打印邮件…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...