关于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


猜你喜欢
- 今天好友问我怎么从阿里云服务器上把文件下载下来。我一听之下觉得办法很多啊,随意搭个服务器,然后把文件一丢就可以下载了;弄个FTP也行;直接用
- 本文详细讲述了Python使用MySQLdb for Python操作数据库的方法,分享给大家供大家参考。具体如下:一般来说网站就是要和数据
- 前言最近在开发项目时遇到了发现一个问题,gorm虽然可以自动帮你维护 created_at、updated_at、deleted_at这些关
- 前言在很早之前写过一篇怎么利用微博数据制作词云图片出来,之前的写得不完整,而且只能使用自己的数据,现在重新整理了一下,任何的微博数据都可以制
- 接触pandas之后感觉它的很多功能似乎跟numpy有一定的重复,尤其是各种运算。不过,简单的了解之后发现在数据管理上pandas有着更为丰
- 打算切换某个网站的主机,没想到遇到Php和Mysql中文乱码的问题。 以前的国外主机用的Mysql是4.x系列的,感觉还比较好,都无论GBK
- 在执行iisapp.vbs时,可能会提示如下错误:Windows Script Component - file://C:WINDOWSsy
- 本文实例讲述了C#简单连接sql数据库的方法。分享给大家供大家参考,具体如下:using System;using System.Colle
- 做前端也有几年时间了,不敢说能把他看地多透,但是多多少少还是有些自己的东西。下面以 Tudou.com 的首页为例,总结总结。就制作而言,我
- 彩色图像转换为灰度图像第一种方式通过 imread 读取图像的时候直接设置参数为 0 ,自动转换彩色图像为灰度图像第二种方式,可以通过 sp
- 太多的小伙伴正在学习Python,就说自己以后要做全栈开发,大家知道这是做什么的吗?我们现在所知道的知识点,哪些是以后你要从事这个全栈所需要
- 如何正确理解MIME类型?mime联系介绍。序号内容类型文件扩展名描述1application/msworddocMicrosoft Wor
- 我们先来看一下运行图下面我们来看源代码:<?php//抓取抖音的接口数据global $nCov_data;$nCov_data[&#
- 编辑注:在Review别人的JavaScript代码时曾看到过类似的队列函数,不太理解,原来这个是为了保证函数按顺序调用。读了这篇文章之后,
- ASP.NET Core必须包含Startup类。它就像 Global.asax 文件,我们传统的 .NET 应用程序。如名称建议的那样,在
- 以下是通过Excel 的VBA连接Oracle并操作Oracle相关数据的示例Excel 通过VBA连接数据库需要安装相应的Oracle客户
- 函数的作用域python中的作用域分4种情况:L:local,局部作用域,即函数中定义的变量;E:enclosing,嵌套的父级函数的局部作
- 批量修改linux服务器密码,同时生成execl表格#!/usr/bin/env python#coding:utf8#随机生成自定义长度密
- 一、概述任务描述:开发一个程序,用于获取局域网中开启snmp服务的主机ip地址列表,并写入相应文件以便其它程序使用。背景知识:SNMP是基于
- 1、Bootstrap-table使用github:https://github.com/wenzhixin/bootstrap-table