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

里面定义函数类型。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Springboot项目启动后按顺序加载自定义类 (demo)

1. 实现ApplicationRunner接口, 重写run方法 import lombok.extern.slf4j.Slf4j; import org.springframework.boot.ApplicationArguments; import org.springframework.boot.ApplicationRunner; import org.springframework.core.annotation.Order; import org.springframewor…

IDEA项目实践——JavaWeb简介以及Servlet编程实战

系列文章目录 IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介 IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——动态SQL、关系映射、注解开发 IDEA项目实践——Spring框架简介,以及IOC注解 IDEA项目实践——Spring当…

mysql 03.查询(重点)

先准备测试数据,代码如下: -- 创建数据库 DROP DATABASE IF EXISTS mydb; CREATE DATABASE mydb; USE mydb;-- 创建student表 CREATE TABLE student (sid CHAR(6),sname VARCHAR(50),age INT,gender VARCHAR(50) DEFAULT male );-- 向student表插入数据…

好用的安卓手机投屏到mac分享

工具推荐:scrcpy github地址:https://github.com/Genymobile/scrcpy/tree/master mac使用方式 安装环境,打开terminal,执行以下命令,没有brew的先安装brew brew install scrcpy brew install android-platform-too…

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

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

【卷积神经网络】卷积,池化,全连接

随着计算机硬件的升级与性能的提高,运算量已不再是阻碍深度学习发展的难题。卷积神经网络(Convolution Neural Network,CNN)是深度学习中一项代表性的工作,CNN 是受人脑对图像的理解过程启发而提出的模型,其…

【C++学习手札】一文带你认识C++虚函数(内层剖析)

食用指南:本文在有C基础的情况下食用更佳 🍀本文前置知识: C初识继承 ♈️今日夜电波:No title —REOL 1:02 ━━━━━━️💟──────── 4:03 …

微服务中间件--微服务保护

微服务保护 微服务保护a.sentinelb.sentinel限流规则1) 流控模式1.a) 关联模式1.b) 链路模式 2) 流控效果2.a) 预热模式2.b) 排队等待 3) 热点参数限流 c.隔离和降级1) Feign整合Sentinel2) 线程隔离2.a) 线程隔离(舱壁模式) 3) 熔断降级3.a) 熔断策略-慢…

基于Servlet实现的管理系统(包含服务器源码+数据库)

资料下载链接 介绍 基于Servlet框架的管理系统 简洁版 ; 实现 登录 、 注册 、 增 、 删 、 改 、 查 ; 可继续完善增加前端、校验、其他功能等; 可作为 Servlet项目 开发练习基础模型; 课程设计 、 毕业设计 开发基础&…

java-垃圾回收与算法

垃圾回收与算法 1. 如何确定垃圾 1. 引用计数法 在 Java 中,引用和对象是有关联的。如果要操作对象则必须用引用进行。因此,很显然一个简单的办法是通过引用计数来判断一个对象是否可以回收。简单说,即一个对象如果没有任何与之关联的引用&…

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

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

Qt平滑弹出页面

目标功能&#xff1a; (1)按下btn&#xff0c;弹出绿色页面。 (2)按下btn2,绿色页面隐藏。 (3)按下左边余下的区域&#xff0c;绿色页面也隐藏。 (4)平滑地显示和隐藏 效果&#xff1a; form.h #ifndef FORM_H #define FORM_H#include <QWidget>namespace Ui { class…

如何将labelImg打包成exe

最近整理一下数据标注这块的内容&#xff0c;在目标检测和目标分割里面用的最多的标注工具labelimg&#xff0c;labelme labelimg主要用于目标检测领域制作自己的数据集&#xff0c;如&#xff1a;YOLO系列目标检测模型 labelme主要用于图像分割领域制作自己的数据集&#xf…

IDEA 设置为护眼的豆沙绿

代码区域设置成护眼色 先打开 IDEA 的设置界面&#xff0c;然后按照下图按顺序店了设置就可以了 这个时候&#xff0c;可以看到&#xff0c;只有代码区域别成了护眼色&#xff0c;其他地方还是白的刺眼&#xff0c;我们来一个一个的解决掉 左侧的文件页修改为护眼色 还是先…

WPF 界面结构化处理

文章目录 概要一、xaml界面结构化处理二、逻辑树与视觉树 概要 WPF 框架是开源的&#xff0c;但是不能跨平台&#xff0c;可以使用MAUI&#xff0c;这个框架可以跨平台&#xff0c;WPF源码可以在github上下载&#xff0c;下载地址&#xff1a;https://gitbub.com/dotnet/wpf。…

5G智能网关助力打造数字乡村物联网

乡村振兴&#xff0c;网络先行&#xff0c;信息通信技术赋能农业农村现代化发展的作用日益彰显&#xff0c;也成为实施乡村振兴战略的重要力量。 截止今年三月&#xff0c;我国5G网络已经覆盖全国所有地级市、县城城区及数万行政村&#xff0c;农村光纤平均下载速率超过100Mb/s…

每天一道leetcode:剑指 Offer 64. 求1+2+…+n(中等递归)

今日份题目&#xff1a; 求 12...n &#xff0c;要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句&#xff08;A?B:C&#xff09;。 示例1 输入: n 3 输出: 6 示例2 输入: n 9 输出: 45 提示 1 < n < 10000 题目思路 使用递归…

阿里云服务器镜像大全_Linux和Windows操作系统清单

阿里云服务器操作系统大全&#xff0c;阿里云提供的镜像均为正版授权&#xff0c;正版镜像可以在云服务器ECS上运行的应用程序提供安全、稳定的运行环境系统&#xff0c;阿里云服务器以公共镜像为例分享阿里云服务器操作系统大全&#xff0c;包括Alibaba Cloud Linux镜像、Linu…

JAVAIO流

// 【I/O】input output &#xff1a;Java对系统中的文件系统的支持 // 【i/o体系】&#xff1a; // 1.处理单位&#xff1a;字节流&#xff0c;字符流 // 2.处理流向&#xff1a;输入流&#xff0c;输出流 // 3.处理功能&#xff1a;节…

设计模式之工厂方法模式(FactoryMethod)

一、概述 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。FactoryMethod使一个类的实例化延迟到其子类。 二、适用性 1.当一个类不知道它所必须创建的对象的类的时候。 2.当一个类希望由它的子类来指定它所创建的对象的时候。 3.当类将创建对象的职责委…