ts与vue

ts与Vue

如果你已经学习了typeScript,但不知道如何在vue项目中使用,那么这篇文章将会很适合你。参考千峰教育 kerwin视频

1.会自动推导,隐士推导。提示

类型系统。

独立模块。

isolatedModules选项:是否配置为独立的模块。

减少报错

let name:string = "kerwin"
myname.toFixed()

如果类型过于复杂,就写any,偷懒的写法。

对象:

使用接口来写类型。

对象有超强的提示。

interface Obj{name:string,age:number
}let myobj:Obj
myobj={name:'kerwin',age:100
}

后面接受数据,任意多少都行。

在这里插入图片描述

函数类型:

function test(a,b){return a+b
}
test(1,2)

选项式api

在这里插入图片描述

方法写错了也能够自动报错。

当定义了类型,就会对应相应类型的api。

在这里插入图片描述

类型断言。

在这里插入图片描述

实例对象,你不确定对象上有innerHTML属性,因为input没有innerHTML属性。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

props未结合ts的写法
在这里插入图片描述

传递对象
在这里插入图片描述

自动补全能力。

import type {Proptype} from 'vue' 这个type怎么理解?

这里的 type 是 TypeScript 的关键字,用于类型声明和类型别名定义。在 Vue.js 中,使用 TypeScript 进行开发时,可以通过 import type 的方式导入一个类型来使用。

具体来说,import type {Proptype} from 'vue' 表示从 vue 模块中导入一个类型别名为 Proptype 的类型。此处的 Proptype 是 Vue.js 框架中用于定义组件属性类型检查的数据类型,它是一个复杂的类型别名,包含了许多其他的类型定义。

通过使用 import type,您可以方便地引用一个类型,而无需同时引入该模块的其他内容,从而使代码更加简洁和可读。同时,由于 TypeScript 是一种强类型语言,在编写代码时使用正确的类型别名也可以帮助您避免一些常见的类型错误和 bug。

在这里插入图片描述

emit事件参数定义类型。检查类型是否符合标准。

组合式api

在这里插入图片描述

显示定义ref
在这里插入图片描述

另一种写法

在这里插入图片描述

DOM元素

在这里插入图片描述

computed也可以采用泛型的写法。

未来去引入别人的库,如果别人的库用ts写的,那么我一但.就会提示出来了。

props传入对象类型的写法:

在这里插入图片描述

过于繁琐:

在这里插入图片描述

本身就是支持泛型的函数。简化写法。在开发的过程中,也会提示你。

emit不会报错。

在这里插入图片描述

里面定义函数类型。

路由与ts的结合

在这里插入图片描述

datalist里面是数组,数组里面每一项是Iitem

里面定义函数类型。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/94748.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数字化时代,数据仓库和商业智能BI系统演进的五个阶段

数字化在逐渐成熟的同时,社会上也对数字化的性质有了进一步认识。当下,数字化除了前边提到的将复杂的信息、知识转化为可以度量的数字、数据,在将其转化为二进制代码,引入计算机内部,建立数据模型,统一进行…

FPGA芯片IO口上下拉电阻的使用

FPGA芯片IO口上下拉电阻的使用 为什么要设置上下拉电阻一、如何设置下拉电阻二、如何设置上拉电阻为什么要设置上下拉电阻 这里以高云FPGA的GW1N-UV2QN48C6/I5来举例,这个芯片的上电默认初始化阶段,引脚是弱上来模式,且模式固定不能通过软件的配置来改变。如下图所示: 上…

华为OD机试 - 查找接口成功率最优时间段 - 回溯(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷&#…

Viobot开机指南

0.前言 本篇旨在让每个拿到Viobot设备的用户都能够第一时间测试它的效果,以及将设备配置到自己的环境下面。 1.上电 首先,我们先要把设备接上电源线和网线,最简单的方式就是网线直连电脑。 电源选用12V1.5A设备自带的电源即可。 2.配置网…

Android 网络编程-网络请求

Android 网络编程-网络请求 文章目录 Android 网络编程-网络请求一、主要内容二、开发网络请求前的基本准备1、查看需要请求的网址是否有效(1)通过网页在线验证(2)使用专用window网咯请求工具(3)编写app代码…

《游戏编程模式》学习笔记(四) 观察者模式 Observer Pattern

定义 观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 这是定义,看不懂就看不懂吧,我接下来举个例子慢慢说 为什么我们需要观察者模式 我们看一个很简…

ubuntu部署haproxy

HAProxy是可提供高可用性、负载均衡以及基于TCP和HTTP应用的代理. 1、更新系统报 通过在终端中运行以下命令,确保所有系统包都是最新的 sudo apt updatesudo apt upgrade2、安装Haproxy sudo apt install haproxy设置开机自动启动haproxy服务 sudo systemctl en…

微服务-Nacos(注册中心)

Nacos是SpringCloud的一个功能非常强大的组件,想比eureka的功能更加丰富 官方的nacos简介 Nacos(全称:Naming and Configuration Service)是一个开源的动态服务发现、配置管理和服务管理平台。它由阿里巴巴集团开发并贡献给开源…

SpringBoot复习:(51)默认情况下DataSource是怎么创建出来的,是什么类型的?

DataSource是通过DataSourceAutoConfiguration创建的,这个类代码如下: 可以看到DataSourceAutoConfiguration有个静态内部类PooledDataSourceConfiguration,在这个类上有个Import注解,导入了DataSourceConfiguration.Hikari这个类&#xff0…

【学习日记】【FreeRTOS】任务调度时如何考虑任务优先级——任务的自动切换

写在前面 本文开始为 RTOS 加入考虑任务优先级的自动调度算法,代码大部分参考野火。 本文主要是一篇学习笔记,加入了笔者自己对野火代码的梳理和理解。 一、基本思路 首先我们要知道,在 RTOS 中,优先级越高、越需要被先执行的的…

Jmeter对websocket进行测试

JMeterWebSocketSampler-1.0.2-SNAPSHOT.jar下载 公司使用websocket比较奇怪,需要带认证信息进行长连接,通过websocket插件是请求失败,如下图,后面通过代码实现随再打包jar包完成websocket测试 本地实现代码如下: pa…

Maven基础之仓库、命令、插件机制

文章目录 Maven 仓库中央仓库和本地仓库中央仓库本地仓库 Maven 命令generate 命令compile 命令clean 命令test 命令package 命令install 命令 Maven 插件机制官方插件:Compile 插件Tomcat 7 插件 Maven 仓库 中央仓库和本地仓库 [✎] 简单一点说 中央仓库是一个网…

软件测试(黑皮书)学习一

第一部分 软件测试综述 第一章 软件测试背景 1.1软件缺陷(software bug) 软件失败的术语 故障(fault)失败(failure) 缺点(defect) ------严重、危险异常(anomaly&…

7. 实现 API 自动生成

目录 1. pom.xml中引用依赖 2. 引入相关的依赖 3. 编写配置类 4. application.yml 中添加配置 5. API 常用注解 6. 访问 API 列表 7. API 导入 Postman 使用 Springfox Swagger生成 API,并导入 Postman,完成API单元测试。 Swagger 简介:Swag…

【Docker】Docker安装 MySQL 8.0,简洁版-快速安装使用

今天,使用docker安装mysql数据库进行一个测试,结果网上找了一篇文章,然后。。。。坑死我… 特总结本篇安装教程,主打一个废话不多说! 坑:安装成功,客户端工具连接不上数据库》。。。 正文&…

运营商三要素 API:构建安全高效的身份验证系统

当今数字化的世界中,身份验证是各行各业中至关重要的一环。为了保护用户的隐私和数据安全,企业需要寻求一种既安全可靠又高效便捷的身份验证方式。运营商三要素 API 应运而生,为构建安全高效的身份验证系统提供了有力的解决方案。 运营商三要…

(三) 搞定SOME/IP通信之CommonAPI库

本章主要介绍在SOME/IP通信过程中的另外一个IPC通信利剑,CommonAPI库,文章将从如下几个角度让读者了解什么是CommonAPI, 以及库在实际工作中的作用 文中资源:vsomeipcommonapi指导文档与demo源码 SOME/IP通信之CommonAPI CommonAPI库是什么C…

Android Jetpack Compose 中的分页与缓存展示

Android Jetpack Compose 中的分页与缓存展示 在几乎任何类型的移动项目中,移动开发人员在某个时候都会处理分页数据。如果数据列表太大,无法一次从服务器检索完毕,这就是必需的。因此,我们的后端同事为我们提供了一个端点&#…

基于YOLOv5n/s/m不同参数量级模型开发构建茶叶嫩芽检测识别模型,使用pruning剪枝技术来对模型进行轻量化处理,探索不同剪枝水平下模型性能影响【续】

这里主要是前一篇博文的后续内容,简单回顾一下:本文选取了n/s/m三款不同量级的模型来依次构建训练模型,所有的参数保持同样的设置,之后探索在不同剪枝处理操作下的性能影响。 在上一篇博文中保持30的剪枝程度得到的效果还是比较理…

异步更新队列 - Vue2 响应式

前言 这篇文章分析了 Vue 更新过程中使用的异步更新队列的相关代码。通过对异步更新队列的研究和学习&#xff0c;加深对 Vue 更新机制的理解 什么是异步更新队列 先看看下面的例子&#xff1a; <div id"app"><div id"div" v-if"isShow&…