关于TypeScript开发的6个小技巧

关于TypeScript开发的6个小技巧

文章资讯开源世界2021-08-27 10:02:043450A+A-

本文总结一下使用TypeScript开发应用程序的一点小经验。说之前,推荐一个VSCODE立即执行TS代码的插件quokka.js, 使用方式,ctrl+shipt+p,输入关键字quokka

未命名 新闻 关于TypeScript开发的6个小技巧 第1张

回车之后,输入代码之后会立即执行

未命名 新闻 关于TypeScript开发的6个小技巧 第2张

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=nulllet video:HTMLVideoElement=nulllet div:HTMLDivElement=nulllet canvas:HTMLCanvasElement=nulllet e:Event =null //事件对象  e.target复制代码

一定要给DOM元素类型,这样你才能收获代码提示

未命名 新闻 关于TypeScript开发的6个小技巧 第3张

这里补充一个上传文件时类型怎么给,给Input元素绑定了onChange方法,方法如下:

onChange(event: Event): void {  if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {    const [file] = event.target.files;
  }
}复制代码

5.对象的类型要怎么给

有一个函数,接收对象作为参数,类型要怎么给?

未命名 新闻 关于TypeScript开发的6个小技巧 第4张

首先,不要给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用的较多。


Copyright 码农素材 版权所有 精品源码推荐:http://github.crmeb.net/u/defu
#转载请注明出处!

点击这里复制本文地址 以上内容由开源世界整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

开源世界-开源独尊-开源中国-ThinkPHP-CRMEB-商城源码-项目下载站-CMS企业模板-互站网-悟空源码-A5资源网-CSDN-ASP300 © All Rights Reserved.  Copyright 开源世界 版权所有
Powered by 百搜科技 Themes by www.baisou.ltd
联系我们| 关于我们| 留言建议| 网站管理

分享:

支付宝

微信

嘿,欢迎咨询
请先 登录 再评论,若不是会员请先 注册