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.mzph.cn/news/41701.shtml

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

相关文章

dispatcherServlet在tomcat启动时如何被加载(1)

目录 在springboot工程中, 如何添加一个servlet呢? 方法1 : 使用WebServlet注解 方法2 : 使用ServletRegistrationBean进行注册 springmvc 采用的就是方式2和springboot集成的, 看一下源码 springboot 字段装配里面有这个类, 看一下源码 90行, 创建了一个DispatcherServlet对象…

深入探究Socks5代理与IP代理在网络安全与爬虫中的应用

1. Socks5代理:打开网络隧道的多功能工具 Socks5代理是一种流行的代理协议,它在传输层为数据包提供了隧道。相较于之前的版本,Socks5不仅支持TCP连接,还可以处理UDP流量,使其在需要实时数据传输的应用中表现出色。在网…

Zabbix配置通用的TCP/IP:port监控项

我们经常的用接口,比如说FTP、HTTP、DNS、数据库接口,都可以用IP:PORT方式探测其是否存活,那么我们去繁就简,就简单监控一下IP:PORT吧! 1、新建主机: 填入主机名称、群组、Agent就是127.0.0.1…

解决Adobe Flash Player已被屏蔽

问题:该插件不支持 原因:现在浏览器默认禁用flash 博主当前使用的是谷歌浏览器Chrome 2个主要方法都已经失效 搜索一圈后,之前博客给出的2个主要方法都已经失效。 1、flash.cn 下载本地播放器 2、在chrome中打开flash的禁用开关 2023年解…

LangChain源码逐行解密之系统(二)

LangChain源码逐行解密之系统 20.2 serapi.py源码逐行剖析 我们可以看一下Google查询的例子,在LangChain中有多种实现的方式。 如图20-5所示,在utilities的serpapi.py代码文件中实现了SerpAPIWrapper。 图20- 5 utilities的serpapi.py的SerpAPIWrapper 在langchain目录的se…

@pyrallis.wrap()

pyrallis.wrap import pyrallis pyrallis.wrap() 这个pyrallis.wrap()是什么 pyrallis.wrap() 是一个 Python 装饰器(Decorator),用于将函数或方法包装在 Pyrallis 框架提供的性能分析器中。装饰器是 Python 中的一种特殊语法,允许…

如何避免爬虫IP被屏蔽

各位爬友们好,作为一名专业的爬虫代理提供者,我要和大家分享一些避免爬虫IP被屏蔽的实用技巧。你知道吗,当我们爬取数据的时候,很容易被目标网站识别出来并封禁我们的IP地址,导致无法继续爬取数据。这个问题困扰了很多…

7. 实现 API 自动生成

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

执行Lua脚本后一直查询不到Redis中的数据(附带问题详细排查过程,一波三折)

文章目录 执行Lua脚本后一直查询不到Redis中的数据(附带详细问题排查过程,一波三折)问题背景问题1:Lua脚本无法切库问题2:RedisTemlate切库报错问题3:序列化导致数据不一致问题4:Lua脚本中单引号…

Etcd备份及恢复

一、Etcd数据备份 1、备份命令 [rootlocalhost ~]# export ETCDCTL_API3 [rootlocalhost ~]# /data/etcd-3.4.9/bin/etcdctl --endpoints10.2.20.108:2379 snapshot save etcd-date "%Y-%m-%d_%H-%M-%S".snapshot 2、备份完成后会在当前目录生成备份文件 [rootlo…

vue实现打印功能

在Vue应用中调用打印机功能,可以使用JavaScript的window.print()方法。这个方法会打开打印对话框,然后让我们选择打印设置并打印文档,但是尼这种方法依赖于浏览器的打印功能。 以下是一个简单的示例,演示如何在Vue组件中调用打印…

Linux Tracing Technologies

目录 1. Linux Tracing Technologies 1. Linux Tracing Technologies Linux Tracing TechnologieseBPFXDPDPDK

Flask Web开发实战(狼书)| 笔记第1、2章

前言 2023-8-11 以前对网站开发萌生了想法,又有些急于求成,在B站照着视频敲了一个基于flask的博客系统。但对于程序的代码难免有些囫囵吞枣,存在许多模糊或不太理解的地方,只会照葫芦画瓢。 而当自己想开发一个什么网站的时&…

ubuntu部署haproxy

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

Lnton羚通关于如何解决nanoPC-T4 upgrade报错问题?

nanoPC-T4 在 ​​# sudo apt update 和 sudo apt upgrade​​升级或安装软件 ​​sudo apt install xxx​​时遇到以下问题:​​Failed to set up interface with /etc/hostapd/​ Setting up hostapd (2:2.6-15ubuntu2.8) ... Job for hostapd.service failed be…

ssm+vue医院住院管理系统源码和论文PPT

ssmvue医院住院管理系统源码和论文PPT012 开发工具:idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具:navcat,小海豚等 开发技术:java ssm tomcat8.5 摘 要 随着时代的发展,医疗设备愈来愈完善,医院也变成人们生…

基于IMX6ULLmini的linux裸机开发系列一:汇编点亮LED

思来想去还是决定记录一下点灯,毕竟万物皆点灯嘛 编程步骤 使能GPIO时钟 设置引脚复用为GPIO 设置引脚属性(上下拉、速率、驱动能力) 控制GPIO引脚输出高低电平 使能GPIO时钟 其实和32差不多 先找到控制LED灯的引脚,也就是原理图 文件名 C:/Us…

spring头约束(全部)

文章目录 spring-mvcspring-aopspring-txspring-contextspring-taskspring-cachespring-jdbcp命令空间spring-jeejmslangoxmutil总结 spring-mvc <beans xmlns"http://www.springframework.org/schema/beans" xmlns:xsi"http://www.w3.org/2001/XMLSchema-…

AUTOSAR NvM Block的三种类型

Native NVRAM block Native block是最基础的NvM Block&#xff0c;可以用来存储一个数据&#xff0c;可以配置长度、CRC等。 Redundant NVRAM block Redundant block就是在Native block的基础上再加一个冗余块&#xff0c;当Native block失效&#xff08;读取失败或CRC校验失…

剑指offer44.数字序列中某一位的数字

最后一道题&#xff0c;我一定要自己做出来&#xff0c;想了不到一个小时想法差不多成熟了&#xff0c;但是有一个小细节出问题了&#xff0c;这个问题我在idea上debug都没debug出来。我先讲我的题解然后再讲我这个小问题出在哪里吧。以下是我的代码&#xff1a; class Soluti…