使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

差不多两年前,我在一个创业团队中开始了一个全新的项目。用到的全都是类似Microservices,docker,react,redux这些时髦的东西。我在前端技术方面积累了一些类似的经验,因为在更早的一年前我带着20多名前端开发人员编写了一个非常大的react应用程序。这对我来说非常具有挑战性。当时我们遇到了很多问题:模型内聚的问题,代码库的增长,复杂且难以

使用TypeScript两年后-值得吗?小白攻略

差不多两年前,我在一个创业团队中开始了一个全新的项目。用到的全都是类似Microservices,docker,react,redux这些时髦的东西。

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

我在前端技术方面积累了一些类似的经验,因为在更早的一年前我带着20多名前端开发人员编写了一个非常大的react应用程序。这对我来说非常具有挑战性。当时我们遇到了很多问题:模型内聚的问题,代码库的增长,复杂且难以维护的api,接口不一致,难以跟踪运行时异常。

在开始新项目之前,我决定找到解决这些问题的方法。我想也许我们遇到的这些问题是因为语言本身有点过于灵活和宽泛导致的。你输入的内容几乎没有限制,再加上没有编译阶段,没有约束和运行前代码验证,这可能导致你的包存在严重错误。

然后我接触到了Flowtype和TypeScript。经过短暂的评估后,我决定选择TypeScript,并且一直用到现在。在两年后的今天,我可以告诉你 – 决定使用TypeScript对项目和我的职业生涯来说是个不错的选择。但是,如果你认为TypeScript开发人员的生活总是称心如意的,那么你最好继续阅读。

在本文中,我不想详细说明TypeScripts的功能或深入项目设置。互联网上有很多很好的资源(例如官方TS文档:https://www.typescriptlang.or…)。当然,这篇文章也不是初学者的入门引导。

这是一个关于在使用TypeScript日常工作中感受到的优缺点的总结。我想描述一下我使用TypeScript的最糟糕体验,另一方面,我也要说一下我认为最有用的功能。所以本文都是关于利弊好坏的权衡,让我们开始吧。

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

首先要做的事 – 配置

正如我所提到的,我对react和redux有一些经验,所以我想利用这些优势,在新项目中使用类似的(自定义)配置。比如 – webpack,babel,npm scripts,jest,linter这些通用的东西,只需要额外做一件小事 – 支持TypeScript。

如果你现在处于同样的境遇 – 我确切的告诉你:它不仅仅是在webpack配置中加一个loader。必须为TS提供一个声明,用TSLint替换ESLint,集成TypeScript的loader和babel的配置,将TS插入Jest(测试平台)。

一些操蛋的事情马上就会发生。TS配置并不好搞,“简单的复制并测试”这种策略并不是上手的最佳方法。

在将tsconfig.json放入项目之前,最好仔细阅读文档。

此外,Jest(转换,模块映射器)和css模块存在一些问题。可能你迟早会面对它们。并且不要认为,你现在可以扔掉babel – TypeScript不会提供任何polyfill来让你使用那些牛批闪闪的新语法和功能,也不会将你的新API转换为旧浏览器可以理解的代码。

所以我的建议是 – 如果可以的话,你应该使用一些入门工具或支持TS开箱即用的CLI(比如 angular cli),以避免无休止的项目配置。

类库支持

另一个非常不愉快的经历与TypeScript支持的类库数量有关。

通常,如果你是某个人npm包的作者,你可以随时使用有效的JavaScript包。有时,您还会公开包的ES6源代码。如果你准备将库用于TypeScript,你必须提供类型定义。简单来说 – 是一个具有每个模块,命名空间,类,方法,函数等的声明的文件,TypeScript使用者需要用到这个。TypeScript模块只能使用定义中描述的内容,并且只能以声明中指定的方式使用。遗憾的是,通常源代码和声明之间没有严格的联系。并且它们可能还是不正确或过时的,或者根本就没有。

就个人而言,我没有找不到声明这样的问题。大多数流行的库都有自己的作者或社区准备好的类型定义。如果您使用的包没有这样的文件 – 那就换一个,相同功能的npm包多的是。不过你可以搞一个“假的”声明文件,或创建一个真实的声明文件并发布出来,以此为开源社区做出贡献。

不管怎样,还有一个更严重的问题 – 正如我之前提到的,一些声明是不正确的或过时的。如果你遇到这样的问题,没有简单的解决方案。你可以使用声明能正常工作的之前的版本,自己修复并贡献出去或等待作者来解决。有时候他们会及时修复,有时候就没那么快了。

顺便说一句,我是一些简单包的作者,相信我,即使想做好,但是我还是常常忘记将新功能与其类型定义同步。

日常工作

现在该轮到高兴点的部分了。一旦你配置了项目并选择了具有良好TS支持的库,就可以体会到类型语言的强大了。如果你没有这种语言的背景,一开始可能有点奇怪。TypeScript中有许多功能在当前的JavaScript语法中找不到。让我们谈谈其中对我来说最有用的那些。

类型

如果大家所想,TS最常用的功能是静态类型。没有使用严格类型校验也就没有使用TypeScript的意义。当然你可以使用宽泛的“any”类型,这意味着“我不关心那个东西的类型,它可能是一个数字,它可能是一个字符串数组,只管用就行了”,严肃脸,如果你想用这样方式编码,那还不如用回旧的JavaScript。

类型将帮助你更快,更安全地编码。你可以告诉编译器“这个常量妥妥的是一个数字”,如果你尝试将其用作数组或字符串,TS编译器将始终提示你输入错误。基本上,你仍然可以使用你的代码做任何你想做的事情,就像常规JavaScript一样,但现在你的操作比以前更安全,更易理解。

TypeScript中有几种基本类型和一点点跟它们相关的高级类型和技术。

下面你可以看到一些基础的但非常强大的东西,对于更高级的类型,请访问文档:https://www.typescriptlang.or…。

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

除了众所周知的类型,如数字或字符串,TypeScript还提供了枚举类型。

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

您可以使用内置类型,如Date或Error。尝试代码提示,以实现更快,更安全的编程。

接口

如果你认为类型是“颠覆者”,那么你对接口有什么看法?接口可以帮助你编写更好的代码,因为它们最终允许你定义对象之间的约定好的实现方式。我创建了很多接口。他们无处不在。有时我专门为接口写一个文件,因为这样是值得的。

我主要用它来描述对象,类,函数和参数的形状。你可以在模块之间共享它们并像处理源代码中的实例一样对待,不过要记住 – 运行时接口不会出现在代码里,这一点很容易忽略。这就是为什么有些情况下使用类而不是接口(如使用Angular Dependency Injection)更好。让我们看一下接口的一些真实例子:

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

在左边 – 返回类型的错误实现。在右侧 – VS Code 立即通知你代码中的错误。

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

在左侧 – 一个类错误地实现了用户扩展的接口(参见上一个屏幕)。在右边 – 描述错误信息..

ES6中有类,所以你可能之前用过它。但是在TypeScript类中有一些额外的功能,可能EcmaScript的未来会实现这些功能。在TS中,您可以定义抽象类,你可以将类的属性描述为静态,私有或只读,您可以扩展类并使类实现接口(没毛病)。我不会比较TS类和ES6类之间的差异,因为最终它们都会产生类似的JavaScript代码(在编译和转换之后)。在TS类中,只是用优雅而有效的方式封装要使用的类,它们与其他语言实现(如Java)非常相似,这会产生一些影响(更多关于“代码审查”部分的内容)。看一下例子就能知道怎么用TypeScript和优秀的代码编辑器配合来让你的工作更容易。

当然,TypeScript中还有很多新东西,比如泛型(你会使用它们),枚举(对于内部事物可能会用到),命名空间,JSX支持等等。但你一开始不需要知道的面面俱到,只需使用上面提到的基本功能,你将看到,你的代码质量得到了提高。

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

使用TypeScript,你可以使用抽象类等功能。有关抽象类的更多信息:https://www.typescriptlang.or…

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

TypeScript支持private,public和protected方法,只读属性。类可以实现接口或扩展其他类。

代码质量

我刚才提到代码质量了吗?当然提到了,因为我们都关心代码质量(除此之外还有客户需求,截止日期和排期,以及…)。

那么为什么应该使用TypeScript呢?(在代码质量这个层面)

  • 代码中没有与参数或变量名的拼写错误相关的一些非常烦人的运行时错误
  • 您可以建立清晰明了的对象之间的约定
  • 不用hack的手段就能实现类似在class中使用private的事情
  • 有来自编译器的即时反馈,很多错误都是在编译阶段捕获的,而不是在运行时
  • 让非JS开发人员更容易阅读和理解代码
  • 你可以使用JavaScript未来版本中的功能
  • 为单元测试编写mocks,stubs和fakes要容易得多,因为你知道他们的确切接口。

此外,由于出色的IDE支持,编写可维护代码要容易得多。老实说 – 即使你单独写一个不大的应用程序,几周后你也会忘了你必须传给服务的参数类型或新创建用户包含什么样的数据。你当然可以翻源码,过一遍代码然后找到有用的信息(假设你的代码总是简洁的),但在你喜欢的编辑器中将鼠标hover到函数名上就能看到你要的信息岂不更好?例如,它接受“age”,这是一个“number”,并返回具有“age”和“name”属性的用户实例。

代码审查是我想提到的另一件事。当你在小团队中工作时,有时候你是唯一的前端开发人员,在做.net或Java的同事真的不喜欢看原生的JavaScript。由于语言的动态和简洁性,他们会觉得可读性很差,没有类型意味着没有提示。例如 – 名称为“user”的对象具有“ID”属性,但ID是数字还是字符串?如果是一个字符串,为什么你只需要调用“toString()”就可以了?如果是一个数字,为什么你刚刚在它前面添加字符串“id_”呢?TypeScript代码看起来很像其他流行的类型语言,并且你有可能将获得更好,更准确的代码审查。更好的代码审查意味着更好的代码,这个不需要我再多说了吧。

使用TypeScript两年后-值得吗?小白攻略_TypeScript指南教程

左侧 – TypeScript中的代码。右边 – Java中的代码。如您所见,语法非常相似,这意味着比起原生的JavaScript,Java开发人员应该更容易理解你的TypeScript代码。

学习曲线

最后关于TypeScript我还要多说一点。与往常一样,当你尝试新事物时,会有一些学习曲线。放到TS下看,它不是非常陡峭,但是要避免TypeScript和新框架一起用,这两样加起来就会让学习曲线变得足够陡峭。特别是在大型或缺乏经验的团队中。这就是为什么我两年前选择了这个项目作为我的第一个TypeScript应用 – 我对react那套技术栈非常熟悉,所以这是一个学习一种有前途的新语言很好的会。我敢保证,如果我同时选择了一个新框架(比如说Angular)和一种新语言,我会被按在地上摩擦。

总结

我会向你推荐TypeScript吗?当然会。它将帮助你在更短的时间内写出更好的代码。IDE支持现在非常棒,社区充满活力,具有TS定义的库的数量很庞大而且还在不断增长,用过的程序员都说好(来自编译器的快速反馈)。这是我所知道的用于创建现代和可扩展的Web应用程序(当然还有Node.js服务)的最佳工具。请记住上面提到的一些缺点,解决了它们就能深入探索静态类型语言的多彩世界了。

海计划公众号
(0)
上一篇 2020/03/30 16:08
下一篇 2020/03/30 16:08

您可能感兴趣的内容

  • 通过框架设计理解React、Angular、Vue区别基础教程_框架小白帮助

    我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们可以从框架设计上入手试着分析它们。一、职责范围职责范围就是框架设计之初要考虑的范围,是一手全包还是只封装底层核心代码?简单说就是这个框架可以为你做多少事情1.small

    2020/03/23
  • nodejs能做图像处理吗?基础教程_图像基础知识入门

    在做H5应用中,有时候会涉及到一些图片加工处理的操作,nodejs有一个很好的后台图片处理module,就是这里说的gm。nodejs使用gm模块进行图像处理的方法如下:首先要安装 GraphicsMagick或者ImageMagicknpm install –save gm用法说明图片尺寸gm(‘img.png’)
    .size(function (err

    2020/03/22
  • 缓动函数速查表基础知识教程一个帮助你找到想要的缓动函数的网站

    缓动函数速查表菜鸟指南 官方网址:https://easings.net/zh-cn 简介描述:一个帮助你找到想要的缓动函数的网站 缓动函数指定动画效果在执行时的速度,使其看起来更…

    2020/03/06
  • 你知道我们平时在CSS中写的%都是相对于谁吗?小白攻略_css作者: 转载攻略教程

    本文作者:IMWeb jerryOnlyZRJ 原文出处:你知道我们平时在CSS中写的%都是相对于谁吗? – 腾讯Web前端 IMWeb 团队社区0.引言在我们编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题,我们常常会使用下面这

    2020/04/05
  • 如何将React Native 项目运行在 Web 浏览器上面基础入门_跨平台基础知识

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力。相比之前的 Web app 来说,对于性能和用户体验提升了非常多。但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问。这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦,而

    2020/04/05
  • angular组件间通讯菜鸟攻略_通讯基础教程

    angular组件间通讯菜鸟攻略 一个Angular应用一般情况下包含多个组件,而且要让组件互相之间能进行通讯(数据传送),这样才能构成一个有机的完整系统。 1、情景引入 下面例举…

    2020/03/20
  • 如何用自己喜欢的 CSS 风格重置网站的样式小白攻略_样式指南攻略

    许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。在本文中,我会与你分享我自己的 CSS reset 项目(除了 Normalize.css 之外我还使用它们)。我将 reset 项分为8类:盒子大小删除边距和填充列表表格和按钮图像和嵌入视频表格隐藏属性Noscri

    2020/03/31
  • stylus入门基础Stylus是一个高效、动态以及丰富的CSS预处理器

    stylus基础入门 官方网址:http://stylus-lang.com/ GitHub:https://github.com/stylus/stylus/ 简介描述:Styl…

    2020/03/05
  • HTML自带懒加载技术入门基础_加载小白教程

    对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行:1、加载初始的 HTML 响应内容2、加载懒加载库3、加载图片假如浏览器能直接支持懒加载,那是最好的,这一想法也不是不可能哦!从Chrome 75开始,我们可以通过切换两个开关来手动启用懒加载功能,可能最新的Chrome将会默认开启懒加载功能了,就是

    2020/03/23
  • Development模式是如何运作的?小白攻略_模式小白知识

    如果您的JavaScript代码库非常复杂,那么您可能会想办法在开发模式和生产模式中捆绑和运行不同代码。在开发模式和生产模式中捆绑并运行不同的代码是非常强大的。在开发模式中,React里有许多预警,可以帮助我们在导致bug之前找到问题。然而,检测此类错误所需的代码通常会增加bundle文件的大小,并使应用程序运行得更慢。在开发模式中程序运行缓慢是可以接受的。

    2020/03/26
  • Js数组去重方法及效率对比菜鸟知识_数组入门基础教程

    前言其实网上搜索这些方法一堆堆的,之所以还来写一遍主要是因为自己习惯一种之后就忘了其他方法怎么实现,就写一写总结一下,顺便做个测试看看哪个效率最高,为了更好展示效果,我会先总结认为比较好的方法,后面统一测试。(温馨提示:下文衹是为了简便,一般情况下不建议写在原型上,容易污染全局)一,通过寻找对象属性var ary = [14, 12, 2, 2, 2, 5,

    2020/03/29
  • Web 应用的内存优化菜鸟知识_内存基础入门

    随着 Web 应用复杂程度越来越高,以及 NodeJS 大规模投入生产环境,许多 Web 应用都会长时间运行, JavaScript 的内存管理显得更为重要。JavaScript 具备自动回收垃圾的机制, 执行环境会负责管理代码在执行环境过程中使用的内存,将某些不再被使用的的变量所占用的内存释放掉,正因如此,大多数情况我们在前端开发的时候,并不是那么关注我们

    2020/03/29
  • Sequelize零基础入门_一款Nodejs ORM框架

    Sequelize零基础入门 官方网址:http://docs.sequelizejs.com GitHub:https://github.com/sequelize/sequel…

    2020/03/06
  • 中国软件网小白指南_专注于软件工具、IT服务、云计算以及iPhone、安卓等

    中国软件网小白指南 官方网址:http://www.soft6.com/ 简介描述:专注于软件工具、IT服务、云计算以及iPhone、安卓等 中国软件网是企业级软件导购平台。网站拥…

    2020/03/06
  • Vue 3 源码开放了菜鸟知识_源码菜鸟攻略

    在2018 年9月30日,Vue 作者尤雨溪在他个人博客上发布了 Vue 3.0 的开发路线。于2019年10月5日凌晨,尤雨溪在微博宣布 Vue 3.0 的源码开放了。微博截图如下:Vue 3源码:网页链接 。尤雨溪称,目前依然是 pre-alpha 状态,但主要的架构改进、优化和新功能都已经完成,剩下的主要是完成一些 Vue 2 现有功能的移植。已完成的

    2020/03/23
  • react-datasheet小白常识_类似 Excel 数据表格的 react 组件

    react-datasheet小白常识 官方网址:https://nadbm.github.io/react-datasheet/ GitHub:https://github.co…

    2020/03/06