关闭

用TypeScript弥补Elm和JavaScript之间的差距

时间: 2018-03-13阅读: 1636标签: TypeScript

近些日子,我使用了新语言编程,从JavaScript,切确地说是Elm,转成TypeScript。写过一篇文章解释了我为什么选择TypeScript作为我的前端语言。在本文中,我将继续深挖一些我非常喜欢的TypeScript特性。


联合类型--更好地表达数据

在我短暂使用Elm编程的过程中,越来越喜欢联合类型这个特性。让我们探究这个特性,看它是怎么让Elm和TypeScript变得更加好用。

联合类型,又被称为标记联合和代数数据类型(ADTs)。相对于仅仅只是用JavaScript内置的数据类型,它能让编程者更加精确地表达数据。

很多编程语言难以表达好结构奇怪的数据。这些语言只提供一小组内置类型,而你所有数据都得使用这些类型去表达。所以你经常使用"null",或者布尔值或者字符串去表达奇怪的细节,这是很容易出错。

Elm的联合类型让复杂数据更加自然地表达--Evan Czaplicki(Elm作者)。

Redux是受Elm启发而来。在Redux和Elm中,应用数据的流动和变化通过接口的形式体现。这个过程非常类似Elm中的联合类型。让我们看些代码来证明这一点。

Redux Reducer 例子

Redux中的核心抽象就是reducer函数。store是应用中储存数据的地方,reducer函数作用于store之前,它让开发者能精确控制着应用数据的变化。在用redux构建的应用中,数据被认为是不可变化的,改变数据的唯一方法是行动触发了reducer函数,reducer函数根据行动的类型返回下一个数据状态。配合Immutable js,JavaScript基本拥有了Elm 架构的所有功能。唯一缺失的是静态数据,尤其是联合类型。接下来,我重写了一些reducer函数的例子来证明Elm和Redux的相似。

当我开始学习Elm时,我发现了Redux和Elm架构之间的相似性,我就像


我在哪里?耶,是的,联合类型。就如你上面所看的,我使用了一个联合类型:'Msg'类型。这个关键词现在变成了一种类型。当你使用Javascript和Redux时,你需要确保reducer函数是正确的。所以你必须将动作类型定义为不变类型并且确保它们没写错,还要确定在reducer函数中没有改变了数据状态。

你写了大量的单元测试,确保每种情况都覆盖到,并且每种场景都能返你想要的结果,这些结果是由动作触发或reducer函数决定的。随着项目的发展,事情开始偏离正轨。当你重构你的代码时,保持测试与代码同步是非常烦人的事情。Redux需要数据的正确,但是由于Javascript自身没有静态类型,我们编写或者重构代码时,不能在编译器时就帮我们检查出来。

然而在Elm中就完全不一样了。编译器,依靠其本身优秀的特性,会全程帮助我们。事实上,如果写错了类型或者常数,就不能编译成功。这就是联合类型的力量所在。

当调用update函数时,按字面意思,必须传递一个"Msg"类型给函数;如果传递了其它内容,Elm将不会编译通过。如果忘记处理其中某个情况,Elm编译器会给你一个友好提示,告诉你现在不能处理所有情况,因为你没有将默认的情况考虑进去。

这意味着在编译的时候,你就能查找出所有bug而不用等到代码运行才发现。这样,由于运行时出的错误和写测试用例所花费的一大串时间都能省下来。除此之外,联合类型让我们可以用声明式和描述式的方式去定义数据类型和使用方式。

正如 上一篇文章所讨论的,不管我多喜欢Elm,我还是时不时要写JavaScript。TypeScript帮我解决了这个难题,主要是因为它支持联合类型。让我们看看在Redux中怎样使用TypeScript的联合类型。


有人记得是哪部电影吗?


用静态数据构建UI组件框架编写组件框架文档

react首先提出了构建独立可重复使用的UI组件框架这个概念。经过几年的发展,我们真的看到一些令人惊叹的框架,比如Grommet UXMaterial UIBlueprint 和 Ant.Design。我一直有个目标,想为这些框架做出贡献,现在我已成为Grommet的贡献者。看着这些优秀框架的建立过程,让我更加明白哪些功能是框架能做,哪些不能做。

创建可复用UI组件是我的日常工作,在构建React/TypeScript开源项目的过程中,我发现这种能力得到了提升。不仅如此,我花在写文档和测试用例的时间比以前少。这要归功于TypeScript编译器,跟Elm编译器很类似,它们可以给你很有用的建议,让你能嵌入元数据,这些元数据在代码中描述了你的目的,让编译器去使用。它允许您在编写代码时对其进行文档化,使用智能工具甚至可以为您生成文档。

如果我将要构建一个全新的UI套件,基于上面提到几点原因,我百分百会使用TypeScript。


总结

静态类型是一个被JavaScript丢失的特性。我们非常幸运看到,当我们写JavaScript时,我们能选择去使用静态类型。不管你是不是有函数编程的背景,类型都能帮你写出自文档的代码,这些能帮你规范好数据。在没有静态类型下,是很难做到的。


原文出处 Bridging the Gap Between Elm and JavaScript with TypeScript 
翻译来源:http://www.zcfy.cc
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/500

TypeScript 中高级应用与最佳实践

当我们讨论 TypeScript 时,我们在讨论什么?TypeScript 中的 Decorator 较为特殊,为 Angular 团队和 TypeScript 团队交易的结果,有兴趣可自行搜索相关资料。而且近期 EcmaScript 规范中的 decorator 提案内容发生了剧烈变动

谷歌为何会选用TypeScript?

谷歌在很早之前就张开双臂拥抱 Web 应用程序,Gmail 已经发布 14 年了。当时,JavaScript 的世界是疯狂的。Gmail 工程师不得不为 IE 糟糕的垃圾回收算法捏一把汗,他们需要手动将字符串文字从 for 循环中提取出来,以避免 GC 停顿

TypeScript 渐进迁移指南

最大的问题是我没有提供迁移大型项目的解决方案。显然,大型项目不可能在短时间内重写一切。因此,我很想分享下我最近学到的迁移项目到 TypeScript 的主要经验。

TypeScript和Nodemon终极设置!

学习如何设置TypeScript和Nodemon,以提高你的生产力并轻松开发!设置TypeScript和Nodemon有时会有些棘手,在本文中,我将向你展示如何轻松设置TypeScript和Nodemon!

TypeScript:入门TS

官方网站的定义是:TypeScript 是 JS 类型的超集。它假设咱们知道什么是超集,什么是类型化。为了简单起见,你可以将 TypeScript 看作是 JavaScript 之上的一个外壳。TypeScript 是一个外壳,因为编写 TypeScript 的代码

TypeScript功能:const断言

我发现官方的 TypeScript 文档非常有用,但是总觉得有点过于学术化并且枯燥无味。每当我发现一个新功能时,我想要知道这个功能究竟能够解决什么问题而不是长篇大论

Typescript中以变量方式传递类

最近尝试用TypeScript写一个工具库,需要实现这样一个场景:声明一个抽象类Parent,声明一组子类ChildA、ChildB继承这个Parent,实现它的抽象方法

TypeScript 中的类型保护

如上所示,getSmallPet 函数中,既可以返回 Fish 类型的对象,又可以返回 Bird 类型的对象。由于返回的对象类型不确定,所以使用联合类型对象共有的方法时,一切正常,但是使用联合类型对象各自独有的方法时,ts 会报错。

什么场景下不应该使用 TypeScript?

TypeScript 很棒,但有时用它编程只是在浪费时间。TypeScript 的优势在于它能在编译时调试 JavaScript,但有些情况并不适合我们使用 TypeScript,比如构建小型应用程序或原型应用时。

TypeScript基础

数组类型有两种类型注解方式,特别注意第二种使用 TS 内置的 Array 泛型接口。元组类型:元组是一种特殊的数组,限定了数组元素的个数和类型,函数类型可以先定义再使用

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!