关于TypeScript开发的6个小技巧

落日映苍穹つ 2022-09-09 01:50 191阅读 0赞

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

![image.png][]

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

![image.png][image.png 1]

1.  开发之前确定实体类型  
    在正式编码之前，如果没有接口文档的话，最好能拿到数据字典，根据数据字典定义一下项目中实体类型，例如数据字典中有用户表，企业表，我们就可以新建一个types文件夹，把对应的类型放到不同的文件中，目录如下：

types
        user.ts
        corp.ts
        ...
    复制代码

推荐使用interface定义实体类型，比type语义化更好

interface User{ 
        id:string
        name:string
    }
    复制代码

1.  请求接口时只需要定义自己需要用到的字段  
    定义类型时只需要定义自己需要用到的字段，没用的字段不需要定义。因为后端返回的数据是什么类型，需要前端来指定类型然后TS做判断，如果前端不指定类型，TS根本没办法判断。

例如后端返回的数据如下：

user:{ 
        id:1,
        name:'xiaoming',
        sex:0
    }
    复制代码

定义的类型如下：

interface User{ 
        id:number,
        name:string
    }
    复制代码

这种情况下，TS只会检查user中有没有id和name，对于sex是忽略的

1.  使用枚举类型  
    像性别（男女），管理员类型（超管、普通用户），会员类型（普通用户，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'
    }
    复制代码

1.  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元素类型，这样你才能收获代码提示

![image.png][image.png 2]

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

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

5.对象的类型要怎么给  
有一个函数，接收对象作为参数，类型要怎么给？

![image.png][image.png 3]

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

结语  
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu] 不胜感激 ！

来自 “开源独尊 ” ，链接: [https://ym.baisou.ltd/post/858.html][https_ym.baisou.ltd_post_858.html]

[image.png]: /images/20220829/c4421e28cd2e46598e3d392da80f2dfd.png
[image.png 1]: /images/20220829/6509b6cb56d541db9b43b8c05d944d27.png
[image.png 2]: /images/20220829/d786f3e5a0ae4994a0d2b4ca80fb66a0.png
[image.png 3]: /images/20220829/67e9e1fb7cb2479c8dfeb45e8ea98c12.png
[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu
[https_ym.baisou.ltd_post_858.html]: https://ym.baisou.ltd/post/858.html