关于TypeScript开发的6六个实用小技巧分享
作者:_红领巾 发布时间:2024-04-16 08:59:26
目录
1. 开发之前确定实体类型
2. 请求接口时只需要定义自己需要用到的字段
3. 使用枚举类型
4. DOM元素的类型要正常给
5.对象的类型要怎么给
6.结构赋值时类型怎么给
总结
本文总结一下使用TypeScript开发应用程序的一点小经验。说之前,推荐一个VSCODE立即执行TS代码的插件quokka.js,
使用方式,ctrl+shipt+p,输入关键字quokka
回车之后,输入代码之后会立即执行
1. 开发之前确定实体类型
在正式编码之前,如果没有接口文档的话,最好能拿到数据字典,根据数据字典定义一下项目中实体类型,例如数据字典中有用户表,企业表,我们就可以新建一个types文件夹,把对应的类型放到不同的文件中,目录如下:
types
user.ts
corp.ts
...
推荐使用interface定义实体类型,比type语义化更好
interface User{
id:string
name:string
}
2. 请求接口时只需要定义自己需要用到的字段
定义类型时只需要定义自己需要用到的字段,没用的字段不需要定义。因为后端返回的数据是什么类型,需要前端来指定类型然后TS做判断,如果前端不指定类型,TS根本没办法判断。
例如后端返回的数据如下:
user:{
id:1,
name:'xiaoming',
sex:0
}
定义的类型如下:
interface User{
id:number,
name:string
}
这种情况下,TS只会检查user中有没有id和name,对于sex是忽略的
3. 使用枚举类型
像性别(男女),管理员类型(超管、普通用户),会员类型(普通用户,VIP,超级VIP)这种类型的数据结构适合用枚举类型来定义,枚举类型也可以作为值来使用。
举个栗子:
//使用枚举类型来定义会员类型
enum UserType{
Common=0,
VIP=1,
SuperVIP=2
}
class User{
id:string
name:string
type:UserType
}
let userList:User[]=[]
userList.push({
id:'001',
name:'Jack',
type:UserType.SuperVIP //枚举类型定义的类型可以作为值来使用
})
枚举类型也可以是字符串,举例如下,用法同上
enum UserType{
Common='DiaoSi',
VIP='LowBVIP',
SuperVIP='SuperVIP'
}
4. DOM元素的类型要正常给
对于DOM元素,不要给any,人家是有类型的。
一般来说,所有的标签都继承自HTMLElement,然后不同标签有不同的类型,这个类型往往是套路化的,例如video元素的类型就是HTMLVideoElement,div元素的类型是HTMLDivElement,canvas元素的类型是HTMLCanvasElement,以此类推。其实常用的类型并不多,简单列一下:
let element:HTMLElement=null
let video:HTMLVideoElement=null
let div:HTMLDivElement=null
let canvas:HTMLCanvasElement=null
let e:Event =null //事件对象 e.target
一定要给DOM元素类型,这样你才能收获代码提示
这里补充一个上传文件时类型怎么给,给Input元素绑定了onChange方法,方法如下:
onChange(event: Event): void {
if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {
const [file] = event.target.files;
}
}
5.对象的类型要怎么给
有一个函数,接收对象作为参数,类型要怎么给?
首先,不要给any,不要动不动就给any,较Low,想想对象包含啥,一个key,一个value。key的话肯定是个string类型,value要看具体需求,有可能你的value只能是数字或者字符串,那就 number|string,如果啥都可以,那就给any吧
//定义对象的类型,key一般是string,value可以按照需求给
interface ObjType{
[key:string]:any
}
function deepCopy(obj:ObjType){
for(let key in obj){
console.log(obj[key])
}
}
let obj={name:"Jack"}
deepCopy(obj)
6.结构赋值时类型怎么给
你有一个函数,接收一个对象,在对象中对参数进行解构,结构得到的对象属性的类型要怎么给,代码如下:
const user={
name:'Jack',
age:10,
friends:[{id:0,name:'Peter',connect:100},{id:1,name:'Alice',connect:69}]
}
interface Friend{
id:number,
name:string,
connect:number
}
function handleFriends({friends}){//friends的类型要怎么给
friends.map(item=>item.connect)
}
思考10秒钟,
10
9
8
7
6
5
4
3
2
1
放答案:
interface Friend{
id:number,
name:string,
connect:number
}
function handleFriends({friends}:{friends:Friend[]}){
friends.map(item=>item.connect)
}
这种在react hooks用的较多。
来源:https://juejin.cn/post/7000109529757122590
猜你喜欢
- python绘制横向水平柱状条形图Bar,供大家参考,具体内容如下import matplotlibimport randomimport
- 一、前言1.1 回归分析是用于研究分析某一变量受其他变量影响的分析方法,其基本思想是以被影响变量为因变量,以影响变量为自变量,研究因变量与自
- execjs 使用有了selenium+Chrome Headless 加载页面为什么还要用execjs来运行js?selenium+Chr
- 本文实例讲述了Python使用win32com实现的模拟浏览器功能。分享给大家供大家参考,具体如下:# -*- coding:UTF-8 -
- 本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下:样式自调,最终效果如图:实现效果:点击右边input框会自动切换,如果输入的
- 抛一个学生认证网址:DISCOUNTED AND COMPLIMENTARY LICENSES 直接点For students and te
- 简介桥接模式又叫桥梁模式,属于结构型模式。目的是将抽象与实现分离,使它们都可以独立的变化,解耦。继承有很多好处,但是会增加耦合,而桥接模式偏
- 本文实例讲述了Python 网络编程之TCP客户端/服务端功能。分享给大家供大家参考,具体如下:demo.py(TCP客户端):import
- Python 模块概念python中的模块是什么?简而言之,在python中,一个文件(以“.py”为后缀名的文件)就叫做一个模块,每一个模
- 为了保证程序的健壮性与容错性,即在遇到错误时候程序不会崩溃,我们需要对异常进行处理,1.if进行处理,在错误发生之前进行预防如果错误发生的条
- 此文档是一位高手同事Hewei的原创实践总结,过程真是精彩,最后修复损坏数据库取得圆满效果,值得收藏的一篇好文章。前几天因为mysql数据库
- 最近背着老婆买了一个switch卡带,这货居然给丈母娘讲,害得我被丈母娘说还小了,不买奶粉买游戏,太气人了,我连夜用python写了个《记仇
- 1.前序当下载突然断开后,断点续传就需要了,继续前面下载的内容下载。解决了不需要重复下载2.技术原理HTTP/1.1 开始支持断点续传,一般
- 当我们想给服务器发送一些请求时,可以选择requests库来实现。相较于其它库而言,这种库的使用还是非常适合新手使用的。本篇要讲的是requ
- 本文实例讲述了gearman+mysql方式实现持久化操作。分享给大家供大家参考,具体如下:1、为什么要持久化?gearman的job se
- 介绍本文将介绍基于OpenCV实现视频的循环播放。有以下三个步骤:首先设置一个frame的设置参数frame_counter,值为0在读帧时
- 天下武功,唯快不破。编程也不例外,你的代码跑的快,你能快速找出代码慢的原因,你的码功就高。安装pip install pyinstrumen
- 1、表中字段区分大小写的设置在使用gorm查询的时候,会出现账户名A和a是一样的情况,是因为mysql默认不区分大小写造成的1.问题产生的原
- plotly 的 Python 软件包是一个开源的代码库,它基于 plot.js,而后者基于 d3.js。我们实际使用的则是一个对 plot
- 使用库元素必须首先在DW中正确建立站点。 库被设计用来使重复性的工作更快、更容易并尽可能地无差错。 任