iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于TypeScript开发的6六个实用小技巧分享
  • 447
分享到

关于TypeScript开发的6六个实用小技巧分享

2024-04-02 19:04:59 447人浏览 薄情痞子
摘要

目录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用的较多。

总结

到此这篇关于TypeScript开发小技巧分享的文章就介绍到这了,更多相关TypeScript开发小技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 关于TypeScript开发的6六个实用小技巧分享

本文链接: https://www.lsjlt.com/news/134543.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 关于TypeScript开发的6六个实用小技巧分享
    目录1. 开发之前确定实体类型 2. 请求接口时只需要定义自己需要用到的字段 3. 使用枚举类型 4. DOM元素的类型要正常给 5.对象的类型要怎么给 6.结构赋值时类型怎么给 总...
    99+
    2024-04-02
  • 关于Python中进度条的六个实用技巧分享
    目录1 简介2 tqdm中实用的6个特性2.1 autonotebook自动切换进度条风格2.2 延迟渲染进度条2.3 自定义进度条色彩2.4 自主控制的进度上限2.5 针对enum...
    99+
    2024-04-02
  • 关于JavaScript中JSON的5个小技巧分享
    目录1.格式化2.隐藏字符串化数据中的某些属性3.使用toJSON创建自定义输出格式4.恢复数据5.使用revivers隐藏数据1. 格式化 默认的字符串化器还会缩小 JSON,看起...
    99+
    2024-04-02
  • 几个关于pythonPdf技巧的分享
    目录1.读取PDF2.删除pdf的某些页3.旋转页面4.合并pdf前言: PyPDF2是一个纯Python的开源库,能够分割或合并PDF文件,也可以裁剪或转换PDF文件中的页面。我们...
    99+
    2024-04-02
  • Vue开发的36个技巧分享
    本篇内容介绍了“Vue开发的36个技巧分享”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言Vue 3.x...
    99+
    2024-04-02
  • 分享12个Vue开发中的性能优化小技巧(实用!)
    目录前言1. 长列表性能优化1. 不做响应式2. 虚拟滚动2. v-for 遍历避免同时使用 v-if3. 列表使用唯一 key4. 使用 v-show 复用 DOM5. 无状态的组...
    99+
    2024-04-02
  • 【整理分享】8 个实用Vue开发技巧
    本篇文章整理分享8 个很棒的 Vue 开发技巧,包括路由参数解耦、功能组件、样式范围、watch的高级使用、watch监听多个变量等,希望对大家有所帮助!1.路由参数解耦通常在组件中使用路由参数,大多数人会做以下事情。export defa...
    99+
    2023-05-14
    Vue
  • Vue中$once的两个实用小技巧分享
    目录前言清除定时器$once/$emit + async/await 实现 Dialog 同步执行总结前言 在 Vue 中有很多 API 都有很实用的地方,只是需要挖掘适用的场景,这...
    99+
    2024-04-02
  • 7个很棒的Vue开发技巧分享
    目录1.路由参数解耦2.功能组件3.样式范围4.watch的高级使用5.watch监听多个变量6.事件参数$event7.程序化事件监听器1.路由参数解耦 通常在组件中使用路由参数,...
    99+
    2023-02-08
    Vue开发技巧 Vue技巧
  • 让你更好使用Typescript的11个技巧分享
    目录将类型想象成集合理解类型声明和类型收窄使用带有区分的联合类型而不是可选字段使用类型谓词来避免类型断言控制联合类型的分布方式使用穷举式检查,在编译时捕捉未处理的情况优先选择 typ...
    99+
    2023-01-05
    Typescript使用技巧 Typescript技巧
  • 常用的29个CSS小技巧分享
    本篇内容主要讲解“常用的29个CSS小技巧分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“常用的29个CSS小技巧分享”吧!1.清除图片下方出现几像素的空白间...
    99+
    2024-04-02
  • 分享常用的3个C++小技巧
    目录1、头文件是引用<iostream.h>还是<iostream>?2、逗号分割表达式3、在main函数之前运行代码1、头文件是引用<iostream...
    99+
    2024-04-02
  • 5个实用的Pandas技巧分享
    本篇内容主要讲解“5个实用的Pandas技巧分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“5个实用的Pandas技巧分享”吧!目录Pandas技巧1&...
    99+
    2024-04-02
  • 分享9个实用的Python技巧
    本篇内容介绍了“分享9个实用的Python技巧”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!清理字符串输入对用户输入进行清理的问题几乎适用于...
    99+
    2023-06-16
  • Java中不常用但很好用的开发小技巧分享
    目录BigDecimalcompareToListtoArrayJDK8的小玩意flatMap其实干 Java 开发,必然离不开一些计算,比如如果你现在工作是服务...
    99+
    2023-05-18
    Java好用开发技巧分享 Java开发技巧 Java技巧
  • JavaScript开发的七个实用小技巧(很有用)
    目录1. 数组求和2. 使用 length 属性更改数组3. 数组元素随机打乱4. 过滤唯一值5. 逗号运算符6. 使用数组解构交换数据元素7. 使用 && 代替 I...
    99+
    2024-04-02
  • Golang开发经验分享:提升开发效率的几个技巧
    Golang,一门自 Google 开发的开源编程语言,拥有高效且简洁的语法,以及出色的并发性能,近年来受到越来越多开发者的青睐。在使用 Golang 进行开发的过程中,为了提升开发效率,我们可以使用一些技巧和工具来简化工作流程。本文将分享...
    99+
    2023-11-22
    并发编程 错误处理 编译优化
  • 分享一些Java开发中的使用技巧
    这篇文章给大家介绍分享一些Java开发中的使用技巧,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Web部分:脱离开各种语言,纯粹和 web相关的就是这些: HTML,CSS,JavaScript。哪怕你不用Java开发...
    99+
    2023-05-31
    java ava
  • 分享7个成为更好的Vue开发者的技巧
    目录1、脚本设置2、如何覆盖反应对象3、反应式 CSS4、全局组件5、组合 API 优于选项 API6、使用 v-once 或 v-memo 提高性能7、组件的异步加载1、脚本设置 ...
    99+
    2024-04-02
  • 分享介绍Python的9个实用技巧
    本文会介绍一些Python大神用的贼溜的技巧,让一探究竟吧!欢迎收藏学习,喜欢点赞支持,欢迎畅聊。 整理字符串输入 整理用户输入的问题在编程过程中很常见。有更好的方法来解决: u...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作