ts与vue

news2024/12/23 9:07:22

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.coloradmin.cn/o/890982.html

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

相关文章

innodb索引与算法

B树主键插入 B树在innodb的插入有三种模式page_last_insert, page_dirction, page_N_direction 而在bustub里面的B树就是page_N_direction,如果是自增主键的话,就是上面这样的插入法 FIC优化 (DDL) 选择性统计 覆盖索引 MMR ICP优化 自适应hash 全文索引

乖宝宠物上市,能否打破外资承包中国宠物口粮的现实

近日,乖宝宠物上市了,这是中国宠物行业成功挂牌的第三家公司。同时,昨日,宠物行业最大的盛事“亚洲宠物展”时隔3年,于昨日在上海成功回归。 这两件事情的叠加可谓是双喜临门,行业能够走到今天实属不易&…

09- DMA(DirectMemoryAccess直接存储器访问)

DMA 09 、DMA(DirectMemoryAccess直接存储器访问)DMA配置流程 09 、DMA(DirectMemoryAccess直接存储器访问) DMA配置流程 dma.c文件 main.c文件 详见《stm32中文参考手册》表57。

c++--SLT六大组件之间的关系

1.SLT六大组件: 容器,迭代器,算法,仿函数,适配器,空间配置器 2.六大组件之间的关系 容器:容器是STL最基础的组件,没有容器,就没有数据,容器的作用就是用来存…

java版本spring cloud 企业工程系统管理 工程项目管理系统源码em

工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff…

打印出二进制的奇数位和偶数位

void print(int a) {int i0;printf("奇数位:");for(i30;i>0;i-2){printf("%d ",(a>>i)&1);}printf("\n");printf("偶数位:");for(i31;i>1;i-2){printf("%d ",(a>>i)&1);} …

Prompt、RAG、微调还是重新训练?选择正确的生成式 AI 的方法指南

文章目录 一、前言二、主要内容三、总结 🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 一、前言 这篇博客试图根据一些常见的可量化指标,为您选择适合您用例的生成式人工智能方法提供指导。 生成式 AI 正在以惊人的速度发展&#xff0c…

PyCharm连接Docker中的容器(ubuntu)

一、为什么要用Pycharm链接Docker中的ubuntu 因为在进行深度学习的时候,基于windows系统在开发的过程中,老是出现很多问题,大多数是环境问题。 尽管安装了Conda,也不能很好的解决问题,使用ubuntu是最好的选择。 二、…

MySql过滤重复数据

假设模型表是: 1. 根据单字段过滤: SELECT user_name, COUNT(*) as count FROM sys_user GROUP BY user_name HAVING count > 1;结果: 2. 根据多个字段查询重复数据 SELECT user_name, email, COUNT(*) as count FROM sys_user GROUP BY user_name, email HAVING count…

Qt平滑弹出页面

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

div中的元素水平居中对齐

<div><img src"imgs/xy.jpg" alt""><h2>百变小樱</h2> </div> <style>* {padding: 0;margin: 0;box-sizing: border-box;}div {width: 200px;height: 300px;margin: 20em auto;padding-top: 4em;border: 2px solid rg…

vue启动配置npm run serve,动态环境变量,根据不同环境访问不同域名

首先创建不同环境的配置文件&#xff0c;比如域名和一些常量&#xff0c;创建一个env文件,先看看文件目录 env.dev就是dev环境的域名&#xff0c;.test就是test环境域名&#xff0c;其他同理&#xff0c;然后配置package.json文件 {"name": "require-admin&qu…

桥梁结构健康监测系统,智能预警降低桥梁安全隐患

桥梁通常位于现代综合交通网络中的咽喉部位&#xff0c;对区域经济发展起着重要的推进作用&#xff0c;然而在为社会经济发展做出巨大贡献的同时&#xff0c;它们不可避免地会在荷载作用、环境侵蚀和自然灾害等影响下出现材料腐蚀劣化、结构损伤开裂、性能退化和功能失效等损伤…

销售团队的CRM:不同的销售角色如何使用CRM

客户关系管理&#xff08;CRM&#xff09;是各行各业运营中不可或缺的一部分。确定员工在客户关系管理中的角色是实施过程中的关键要素。 CRM系统为所有与销售相关的工作提供了一个集中平台&#xff0c;使团队能够对数据进行分类&#xff0c;并对活动进行优先排序。CRM 系统的…

CSDN编程题-每日一练(2023-08-17)

CSDN编程题-每日一练&#xff08;2023-08-17&#xff09; 一、题目名称&#xff1a;计算公式二、题目名称&#xff1a;计算逆波兰表达式的结果三、题目名称&#xff1a;争抢糖豆 一、题目名称&#xff1a;计算公式 时间限制&#xff1a;1000ms内存限制&#xff1a;256M 题目描述…

【MySQL--->表的约束】

文章目录 [TOC](文章目录) 一、表的约束概念二、空属性约束三、default约束四、zerofill约束五、主键约束六、auto_increment(自增长)约束七、唯一键约束八、外键约束 一、表的约束概念 表通过约束可以保证插入数据的合法性,本质是通过技术手段,保证插入数据收约束,保证数据的…

项目热部署

本文记录一下热部署步骤。。。。 热部署是提供高开发效率的一个非常有用的工具。指的是在应用程序运行修改代码或资源文件&#xff0c;并将这些变更应用到正在运行的程序上&#xff0c;而无需重新启动应用&#xff0c;无需等待整个项目的重新构建和部署。 使用热部署需要引入依…

leetcode做题笔记85最大矩形

给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 示例 1&#xff1a; 思路一&#xff1a;单调栈 int maximalRectangle(char** matrix, int matrixSize, int* matrixColSize){int dp[matrixSize…

全面揭秘:抖音集团 QUIC 千万 QPS 应用实践

近日&#xff0c;ArchSummit全球架构师峰会深圳站成功举办。随着移动互联网的蓬勃发展&#xff0c;人们对网络速度和实时性的需求日益增加。在面对越来越多的图片、视频和音频等大资源时&#xff0c;页面加载缓慢、视频卡顿等问题频发&#xff0c;传统的传输控制协议&#xff0…

【UE4 RTS】12-HUD functionality Part2

前言 本篇实现了通过按钮控件暂停、加快、减慢游戏速度的功能。 效果 步骤 1. 打开控件蓝图“GameTime_HUD”&#xff0c;在设计器中对进度条控件的百分比创建一个绑定函数 绑定函数命名为“Get_ProgressBar_GameSpeed_SetSpeedDisplay”&#xff0c;并设置该函数类别属于Ga…