花椒前端TypeScript实践总结_新濠天地网 花椒前端TypeScript实践总结_新濠天地网

新濠天地网

花椒前端TypeScript实践总结

此篇新濠天地适用于没接触过TypeScript的人、仅读过文档但无实际项目操作的人,笔者希望借此新濠天地可以给大家提供一个思路,便于以上两种新濠天地的读者做出选择。如果你是TypeScript老鸟,这篇新濠天地可能并不适用于你,但是欢迎官网并一起讨论。

什么是TypeScript?

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScriptapp。

TypeScript添加了可选的静态新濠天地系统和很多尚未正式发布的ECMAScript新特性。

TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。

先列优缺点:

优点:

  • 静态新濠天地
  • 方便官网
  • 减少bug
  • 社区活跃

缺点:

  • 学习成本
  • 开发效率的降低
  • 部分三方库的兼容
  • 需要编译

静态新濠天地

我们都知道,JavaScript是一个弱新濠天地,且是动态新濠天地的脚本语言。笔者大学期间第一次接触JavaScript时简直惊呆了,这也太幸福了吧!什么新濠天地都可以var一下,新濠天地还可以随便赋值,新濠天地的关注值新濠天地?我再也不用关心这些乱七八糟的东西了,这才是语言应该有的样子啊!

但是随着做过的项目越来越多,这里要加一个新濠天地判断,那里也要进行一次新濠天地转换,我渐渐意识到,这个问题不是看到的那样简单,想到这里,我不禁把目光投向了“幸福的罪魁祸首”:“静态新濠天地”。

你是否经常要写这种类似的app?

const data = typeof params === 'object'
? params.data
: JSON.parse(params).data;
if (typeof unix === 'string') {
unix = parseInt(unix);
}

试想一下:

你花了一下午的时间,搞出来一个自认为完美的新濠天地。

然后小明1号拿去新濠天地一下,程序崩溃了。

你查了一下原因:啊,原来是参数的新濠天地传错了,赶紧补文档补注释说明一下。

然后小明2号拿去新濠天地了一下,程序崩溃了。

你查了一下原因:啊,原来是参数的新濠天地传错了,你赶紧叮嘱大家使用时看文档。

然后小明3号拿去新濠天地了一下,程序崩溃了。

你查了一下原因:啊,参数新濠天地没错,但是参数新濠天地里面的值的新濠天地传错了,你???@#&!!!...只能写上一堆判断和转换,让自己的程序更“健壮”。

上面的例子比较极端,但是我们确确实实在经常遇到,那如果js是静态新濠天地的会是什么样子呢?

你花了一下午的时间,搞出来一个自认为完美的新濠天地。

然后小明1号拿去新濠天地一下。

小明1号发现参数新濠天地传错,自己去修改了一下,没来烦你,你甚至注释都懒得写,就开心的下班了。

方便官网、维护

新濠天地系统实际上也是一个非常实用的文档,大部分的新濠天地通过查看新濠天地的定义就可以知道如何使用,并且在vscode(此处使用vscode来代表所有app编辑器)里面去编写TypeScript时,vscode会根据你当前的上下文,把你能用的类、新濠天地、方法和关键字都提示出来,一目了然。不仅如此,TypeScript的特性还增强了vscode的新濠天地,包括app补全、接口提示和点击跳转等等

如下图,我们可以很清晰的通过index.d.ts这个新濠天地了解到cors这个新濠天地的参数新濠天地:

app提示:

那如果我不用TypeScript只使用d.ts不就好了么?

当然也可以,只要你不嫌麻烦的话,因为d.ts新濠天地在TypeScript里面一般都是用tsc自动生成的。

减少bug

在最上面的例子中,我们已经看到了vscode等IDE都会做出新濠天地检查,可以将很多新濠天地错误直接提示出来,这一点在多人开发,和维护大型项目时尤为重要,项目复杂,新濠天地和新濠天地繁多时经常出现一个人改了一点点东西,导致项目崩溃的情况,在TypeScript上面这种情况会大大减少。

但是值得注意的是,使用TypeScript也只能避免一部分错误,不能一劳永逸,平时遵守严格的编码规范,配置eslint,appreview,以及编写单元测试等环节依然很重要!

社区活跃

继Angular之后,React,Vue都相继开始支持TypeScript,尤其是2019年更是TypeScript爆发性增长的一年,大部分第三方库都开始有提供给TypeScript的新濠天地定义新濠天地。

学习成本

TypeScript因为是在JavaScript的基础上扩展,所以真正的学习成本并不大,但毕竟是静态新濠天地,而且需要理解接口、泛型、类、枚举新濠天地新的概念,对于习惯了JavaScript语言的人来说很难习惯,导致了很多前端工程师听见TypeScript的第一反应都是拒绝,尤其是在看了用TypeScript编写的项目后。

而且如果你想要在现有项目中充分体验TypeScript,你又将面临异常高昂的切换成本。

开发效率的降低

虽然新濠天地系统自带文档,可以省去很多编写注释的时间,但是笔者亲身经历,为所有值填上新濠天地真的痛苦,笔者在参与同事编写的h264播放器时,分分钟想切腹自尽。

你以为要写的:

你实际要写的:

人世间最痛苦的事情莫过于此,我5分钟写个方法,1小时才配齐文档。

虽然TypeScript提供了Any新濠天地,但是使用它的同时也失去了TypeScript的优势,建议不要使用。

部分三方库的兼容

随着TypeScript的愈加火爆,很多依赖包都支持了TypeScript,但是依然有一部分还没有支持,如果你的项目刚好依赖了它们而你还想使用TypeScript的话,那你就需要为他添加一个d.ts新濠天地才可以使用,添加的过程有多麻烦,我只想说祝你好运。

需要编译

JavaScript是标准,是可以直接在浏览器运行的,这一点对于需要编译的TypeScript来说,是一个很大的优点。

我们对于TypeScript的使用

我们团队目前使用TypeScript编写的项目:1、h264播放器 2、错误日志后台

未来一段时间准备使用TypeScript编写的项目:1、pc官网服务端重构 2、内部组件库

综合考虑

在开始播放器项目之前我们主要是基于以下几点考虑:

  • 对新技术的尝试。组内人员对新技术的热忱度都很高,希望通过一个项目来实践TypeScript。
  • 播放器是一对多新濠天地的项目。使用播放器的人多且杂,难以保证都能按照文档规范使用,我们希望过滤掉一些低级问题反馈。
  • 多人协作。播放器项目庞大,且音视频信息在各个新濠天地中多是引用新濠天地传递和修改,对于新濠天地系统的需求大,每个人来编写时都可以避免新濠天地错误,并且方便获取参数新濠天地进行操作。
  • app规范化。开源项目,所以app越规范越好,TypeScript便于理解,并配有新濠天地的文档。
  • 新项目。从头开发,没有重构老app的成本。

项目地址:https://github.com/huajiaofrontend/HJPlayer

pc官网服务端重构我们主要是基于以下几点考虑:

  • 接口关注值固定新濠天地。虽然有接口文档,但是之前的接口交互时还是会经常出现php端需要进行新濠天地强制转换,或者js端进行新濠天地强制转换,很麻烦,用TypeScript可以很好的解决这个问题
  • 持续维护。pc官网的服务端部分都是需要持续维护的app,使用TypeScript可以方便大家官网和后续扩展、重构。
  • 不同系统之间新濠天地获取。开发人员不太可能清楚每个系统的数据结构,如果去官网又会浪费大量时间,TypeScript可以直接查询到需要的数据结构并在编写时app提示。

有很多人会问,TypeScript会不会像CoffeeScript一样,在JavaScript引入标准后逐渐被抛弃,那我们还有学习的必要么?

这一点笔者认为,有很大可能是这样的,但是我们没办法确定这个等待期有多长,即便是后续会被JavaScript引入标准,在这之前你就可以享受到上面我们所说的便利,这不香么?

结论

是否使用TypeScript,笔者认为在做出选择之前,你需要认真的衡量一下投入产出比,TypeScript带来的优势是否对当前的项目有很大提升,是否值得花费大量的时间去对现有项目进行重构,值得注意的一点是,不管TypeScript最终会不会被应用到项目中,你都应该学会掌握它了,不要人云亦云。

最后,对于取舍问题,笔者的建议是:如果你的项目是大型项目,第三方库,或者其他需要持续维护的项目,上TypeScript吧;如果你的项目是活动,分享页面,等短周期并且不需要持续维护的项目,想用哪个用哪个,这里我想说,动态新濠天地的爽还是真的爽。


https://mp.weixin.qq.com/s/C8JXI4O3tMzg6_HvDtUQ4Q

高仿 Eyepetizer | 开眼短视频

基于 Kotlin 语言仿写「开眼 Eyepetizer」的一个短视频 Android 客户端项目,采用 Jetpack + 协程实现的 MVVM 架构。

发布于:7月以前  |  1163次官网  |  新濠天地app »

DialogFragment引起的内存泄露

发布于:9月以前  |  1331次官网  |  新濠天地app »

太经典了!雷军 1994 年写的app,像诗一样优雅!

发布于:10月以前  |  428次官网  |  新濠天地app »

图解 | 线程的麻烦事儿,Actor能解决吗?

发布于:10月以前  |  368次官网  |  新濠天地app »

日志规范多重要,这篇新濠天地告诉你!

发布于:10月以前  |  357次官网  |  新濠天地app »

最经典的两种软件架构模式

发布于:10月以前  |  301次官网  |  新濠天地app »

VSCode源码分析 - 主要窗口

workbench.ts中startup里面Workbench负责创建主界面,其新濠天地路径为:`src/vs/workbench/browser/workbench.ts`

发布于:10月以前  |  553次官网  |  新濠天地app »

docker 访问宿主机网络

docker容器访问宿主的方法

发布于:10月以前  |  657次官网  |  新濠天地app »

源码浅析 SDWebImage 5.5.2

本文基于 SDWebImage 5.5.2。重读的原因也是由于发现它的 API 在不断迭代,许多结构已经不同与早期版本,同时也是为了做一个记录。官网顺序也会依据 API 执行顺序进行,不会太拘泥于细节,更多是了解整个新濠天地是如何运行的。

发布于:11月以前  |  649次官网  |  新濠天地app »

go-micro 到底是个啥?

go-micro 到底是个啥?这是很多初接触微服务的技术人员想要弄清楚的,但是大多数新濠天地都只告诉你 go-micro 是一个微服务新濠天地,国内大多数作者写出来的新濠天地都只是 go-micro 官网上的示例app,这样的app还被随意转载。这让很多初接触微服务和 go-micro 有点摸不到头脑。本文试图说清楚这些事。

发布于:1年以前  |  478次官网  |  新濠天地app »

最多官网

为Electron程序添加运行时日志 1年以前  |  8449次官网
Node.js下通过配置host访问URL 1年以前  |  3249次官网
js动态创建类和实例化 1年以前  |  2661次官网
初探 React 组件 1年以前  |  2608次官网
wordpress标签页的制作 1年以前  |  2544次官网
500行PHPapp搞定富文本安全过滤 1年以前  |  2479次官网
22个HTML5的初级技巧 1年以前  |  2393次官网
使用 SRI 增强 localStorage app安全 1年以前  |  2337次官网
浅谈浏览器的原生拖拽事件 1年以前  |  2331次官网
CSS清除浮动 1年以前  |  2316次官网
第三版主题上线 1年以前  |  2312次官网
利用服务器关注header来传输数据 1年以前  |  2273次官网
获取元素的计算的样式 1年以前  |  2258次官网
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  2257次官网
2014年度总结 1年以前  |  2220次官网

qy77千亿国际富爸爸娱乐官网qy77千亿国际