TS在实际开发中的使用
TS的基础使用
// 数字
let num = ref<number>(100)
// 文字
let str = rer<string>('文字')
// boolean
let bo = ref<boolean>(true)
// null
let n = ref<null>(null)
// undefined
let u = ref<undefined>(undefined)
// nan
let na = ref<NaN>(NaN)
// 任意类型
let a = ref<any>('任意类型')
数据类型不固定情况下的使用
// 联合类型
let s = ref<number | string>('文字') // 既可以保存文字也可以保存数字
// 数字、boolean、数组等同理
let s = ref<number[] | Array<string> | boolean>(true)
TS在数组中的使用
// 数字数组
let numArr = ref<number[]>([1,2,3])
let numArr2 = ref<Array<number>>([1,2,3])
// 文字数组
let strArr = ref<string[]>(['1','2','3'])
let strArr2 = ref<Array<string>>(['1','2','3'])
// 元组
let arr : [string,number,boolean] = ['文字', 1 , true]
当系统不确定该类型是什么,但你知道该类型是什么的时候
// 类型推断
/*当系统不确定该类型是什么,但你知道该类型是什么的时候*/
// 案例:通过id来获取对应项
let data = {
id:1,
name : '东方不败'
}
let arr = [
{id:1,text:'艺术概论'},
{id:2,text:'疾风劲草'},
]
arr.find(el=>el.id == data.id as number)
// 或
arr.find(el=>el.id == <number>data.id)
vue3的ref和reactive在TS中的应用
// ref
let num = ref<number>(100) // 数字类型
let num2 = ref<number[]>([1,2,3]) // 数字类型的数组
// ...依此类推
// reactive
let str = ref<string>('疾风劲草') // 字符串类型
let str2 = ref<string[]>(['疾风劲草','一臂之力']) // 字符串类型的数组
// ...依此类推
接口
?:
表明该数据是可选的
// 通过定义接口来实现对大量数据的类型定义
interface IArr {
name : string;
age : number;
gender : boolean;
address ?: '武汉' // ?: 表明该数据是可选的
}
// 内部的键名需要跟接口对应上,顺序没有要求
let arr = reactive<IArr>({
name : '疾风劲草',
gender : true,
age : 100
})
实际开发中,数据多且杂,处理方法
// 模拟数组嵌套对象
// 接口
interface IArr {
name : string;
age : number;
gender : boolean;
info : IInfo; // 接口2使用
}
// 接口2
interface IInfo {
id : number
goodsName : string;
price : number;
status : boolean;
}
let arr = reactive<IArr>({
name : '疾风劲草',
gender : true,
age : 100,
info : {
id : 1,
goodsName : '书',
price : 50,
status : true,
}
})
// 如果该用户有多个info信息,并且是一个数组,那么接口可以写成以下形式:
interface IArr {
name : string;
age : number;
gender : boolean;
info : IInfo[]; // 接口2使用
}
let arr = reactive<IArr>({
name : '疾风劲草',
gender : true,
age : 100,
info : [
{
id : 1,
goodsName : '书',
price : 50,
status : true,
},
{
id : 2,
goodsName : '笔',
price : 2,
status : true,
}
]
})
如果变量内有多个变量,且内部的变量是一个数组或者对象
// 可以使用解构的方法
// 接口
interface IArr {
name : string;
age : number;
gender : boolean;
info : IInfo; // 接口2使用
}
// 接口2
interface IInfo {
id : number;
goodsName : string;
price : number;
status : boolean;
}
let user = reactive<{ arr : IArr }>{
arr : {
name : '疾风劲草',
gender : true,
age : 100,
info : {
id : 1,
goodsName : '书',
price : 50,
status : true,
}
}
}
// *******************************************************
// 你也可以写成下面这种形式
// 该形式是接口嵌套,通过接口内部的arr来规范数据类型
interface IUser {
arr : IArr
}
// 接口
interface IArr {
name : string;
age : number;
gender : boolean;
info : IInfo; // 接口2使用
}
// 接口2
interface IInfo {
id : number;
goodsName : string;
price : number;
status : boolean;
}
let user = reactive<IUser>{
arr : {
name : '疾风劲草',
gender : true,
age : 100,
info : {
id : 1,
goodsName : '书',
price : 50,
status : true,
}
}
}
将接口和数据全都抽离出来的场景应用
js文件-抽离的数据
接口的ts文件
// 这里举个简单的例子,不同的场景其实都差不多
// js文件抽离
interface IUser {
name : string;
age : number;
gender : boolean;
info : IInfo; // 接口2使用
}
// 接口2
interface IInfo {
id : number
goodsName : string;
price : number;
status : boolean;
}
export type { IUser }
数据的js文件
import { reactive } from "vue";
let userInfo = reactive({
name : '疾风劲草',
gender : true,
age : 100,
info : {
id : 1,
goodsName : '书',
price : 50,
status : true
}
})
export { userInfo }
对应的页面使用
// 在需要使用的文件上使用
import { IUser } from './config'
import { userInfo } from './data'
let user = reactive<{value : IUser}>({value : userInfo})
TS在实际开发中的使用的更多相关文章
- Ionic2 + Angular4 + JSSDK开发中的若干问题汇总
前景 目前微信公众号程序开发已经相当火热,客户要求自己的系统有一个公众号,已经是一个很常见的需要. 使用公众号可以很方便的便于项目干系人查看信息和进行互动,还可以很方便录入一些电脑端不便于录入的数据, ...
- 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...
- 借助AMD来解决HTML5游戏开发中的痛点
借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...
- angular开发中对请求数据层的封装
代码地址如下:http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项目 ...
- Android开发中的logcat工具使用
http://os.51cto.com/art/200905/126051.htm 用adb直接查看log: adb logcat 清除之前的log: adb logcat -c 加过滤查看lo ...
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- 在微信小程序开发中使用Typescript
Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Type ...
- TS基础应用 & Hook中的TS
说在前面 本文难度偏中下,涉及到的点大多为如何在项目中合理应用ts,小部分会涉及一些原理,受众面较广,有无TS基础均可放心食用. **>>>> 阅完本文,您可能会收获到< ...
- TDD在Unity3D游戏项目开发中的实践
0x00 前言 关于TDD测试驱动开发的文章已经有很多了,但是在游戏开发尤其是使用Unity3D开发游戏时,却听不到特别多关于TDD的声音.那么本文就来简单聊一聊TDD如何在U3D项目中使用以及如何使 ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
随机推荐
- 一步一图带你深入理解 Linux 物理内存管理
1. 前文回顾 在上篇文章 <深入理解 Linux 虚拟内存管理> 中,笔者分别从进程用户态和内核态的角度详细深入地为大家介绍了 Linux 内核如何对进程虚拟内存空间进行布局以及管理的相 ...
- Java内存马的学习总结
1.前置知识 Java Web三大组件 Servlet Servlet是运行在 Web 服务器或应用服务器上的程序,它是作为来自 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中 ...
- 一键部署MySQL8+keepalived双主热备高可用
概述 本次的文章会格外的长,网上大多的配置流程已经不可使用,本篇文章可以称为保姆级教程,而且通过shell脚本大大减少了部署mysql主从,双主的工作量. 如上图,VIP地址为192.168.10.1 ...
- Crane如何做到利用率提升3倍稳定性还不受损?
作为云平台用户,我们都希望购买的服务器物尽其用,能够达到最大利用率.然而要达到理论上的节点负载目标是很的,计算节点总是存在一些装箱碎片和低负载导致的闲置资源.下图展示了某个生产系统的CPU资源现状,从 ...
- MyBatis详解(二)
前言 本篇幅是继 MyBatis详解(一)的下半部分. MyBatis执行Sql的流程分析 [1]基于前面已经将XML文件进行build解析了并且返回了SqlSessionFactory [1.1]那 ...
- python之实现文件的读写
很早之前做自动化测试,并没有将测试数据与数据库关联,而是直接通过json.ymal.excel等文件管理的.那么怎么用python读写文件呢? 在操作文件前,都需要打开文件,打开文件用内置函数open ...
- [OpenCV实战]52 在OpenCV中使用颜色直方图
颜色直方图是一种常见的图像特征,顾名思义颜色直方图就是用来反映图像颜色组成分布的直方图.颜色直方图的横轴表示像素值或像素值范围,纵轴表示该像素值范围内像素点的个数或出现频率.颜色直方图属于计算机视觉中 ...
- [python]《Python编程快速上手:让繁琐工作自动化》学习笔记7
1. 用GUI 自动化控制键盘和鼠标第18章 (代码下载) pyautogui模块可以向Windows.OS X 和Linux 发送虚拟按键和鼠标点击.根据使用的操作系统,在安装pyautogui之前 ...
- Java求值策略
为什么说Java不存在引用传递? 在Java语言中,存在两种数据类型,一种是基本类型,如int.byte等8种基本类型,一种是引用类型,如String.Integer等.这两种数据类型区别就在于,基本 ...
- [Leetcode]完全平方数
题目 代码 class Solution { public: int numSquares(int n) { vector<int> dp(n + 1, INT_MAX); dp[0] = ...