文档章节

Angular为什么选择TypeScript?

我是钟钟
 我是钟钟
发布于 2017/08/28 11:01
字数 2912
阅读 5.3K
收藏 36

行业解决方案、产品招募中!想赚钱就来传!>>>

原文地址:https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8

同步发布在我的个人网站:http://www.codebe.org

我的开源项目:http://git.oschina.net/zt_zhong/CodeBe

Angular是用TypeScript编写的。在这篇文章中,我将讨论为什么我们作出决定。我还将分享我使用TypeScript的经验:它如何影响我写和重构我的代码的方式。

TypeScript有很好的工具

TypeScript的最大的卖点就是工具。它提供高级自动完成,导航和重构。拥有这样的工具几乎是大型项目的必备要求。没有他们,改变代码的恐惧使代码库处于半只读状态,并使大规模重构非常危险且昂贵。

TypeScript不是编译为JavaScript的唯一类型语言。还有其他语言具有更强的类型系统,在理论上可以提供绝对强大的工具。但在实践中大多数人除了编译器之外没有其他的东西。这是因为构建丰富的开发工具必须是第一天就明确的目标,它是针对TypeScript团队的。这就是为什么他们构建语言服务,可以由使用的编辑器提供类型检查和自动完成。如果您想知道为什么有这么多编辑器具有很好的TypeScript支持,答案就是语言服务。

智能感知和重构提示(例如:重命名变量)对代码编写过程和重构过程的重要性是不争的事实。虽然很难衡量,但我觉得现在之前要几天时间的重构可以在不到一天的时间内完成。

虽然TypeScript大大提高了代码编辑体验,但它使得开发人员设置更加复杂,特别是与在页面上放置ES5脚本相比。此外,您不能使用分析JavaScript源代码的工具(例如JSHint),但通常有足够的替代品。

TypeScript是JavaScript的超集

由于TypeScript是JavaScript的超集,因此您无需经历大量重写即可迁移到JavaScript。你可以一个模块一个模块,逐步的迁移。

只需选一个模块,将.js文件重命名为.ts,然后逐步添加类型注释。完成一个模块之后,再挑选下一个重构模块。一旦编写了整个代码库,就可以开始调整编译器设置,使其更加严格。

这个过程可能需要一些时间,但是对于Angular来说,这还不是最大的问题。逐步迁移的过程,能够让我们保持开发新功能的同时来修复转换过程中的bug。

TypeScript明确了抽象

一个好的设计是关于设计良好的接口。并且以支持它们的语言来表达接口的想法要容易得多。

例如,想象一个销售书籍的应用程序,可以通过用户界面的注册用户或通过某种API的外部系统进行购买。 输入图片说明

正如你所看到的,这两个类都扮演购买者的角色。尽管对应用极为重要,在代码中没有清晰的表达购买者的含义。没有名为buyeraser.js的文件。因此,有人可能会在不知道这段代码含义的情况下修改这个代码。

function processPurchase(purchaser, details){ } 

class User { } 

class ExternalSystem { }

只通过看代码来确定什么对象可以充当购买者的角色,这个角色有什么方法非常困难。我们不知道,我们不会从我们的工具中获得很多帮助。我们必须人为推断这个信息,这很慢,容易出错。

现在,将其与我们明确定义购买者接口的版本进行比较。

interface Purchaser {id: int; bankAccount: Account;} 

class User implements Purchaser {} 

class ExternalSystem implements Purchaser {}

具有类型的版本可以清楚的表示,有一个购买者的接口,然后有两个类实现了这个接口。所以TypeScript接口允许我们定义抽象/协议/角色。

重要的是要认识到,TypeScript不会强制我们引入额外的抽象。购买者抽象存在于JavaScript版本的代码中,但没有明确定义。

在静态类型的语言中,子系统之间的边界是使用接口定义的。由于JavaScript缺少接口,边界并没有在纯JavaScript中表达出来。不能清楚地看到边界,开发人员开始依赖于具体的类型而不是抽象接口,这代码耦合度非常高。

在开发Angular的过程中,在转换到TypeScript之前和之后的工作经验,坚定了我的想法。定义接口,强制我去考虑API的边界,帮助我去定义子系统的接口,并且暴露出耦合的地方。

TypeScript使代码更容易阅读和理解

是的,我知道这看起来不直观。让我试着用一个例子来说明我的意思。我们来看看这个函数jQuery.ajax()。们可以从签名中获得什么样的信息?

jQuery.ajax(url, settings)

我们唯一可以确定的是该函数有两个参数。我们可以猜出这些类型。也许第一个是一个字符串,第二个是一个配置对象。但这仅仅是猜测,我们可能会错。我们不知道什么选项进入设置对象(他们的名字和类型),或者这个函数返回什么。

我们没有办法在不查看源码或者文档的情况下调用此函数。检查源代码不是一个好的选择 - 功能和类的要点是能够在不知道它们如何实现的情况下使用它们。换句话说,我们应该依靠他们的接口,而不是依靠它们的实现。我们可以检查文档,但它不是最好的开发人员体验 - 它需要更多的时间,文档往往是过时的。

所以虽然很容易读取jQuery.ajax(url,settings),要真正了解如何调用这个函数,我们需要读取它的源码或其文档。

现在,将其与类型版本对比

ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR; 

interface JQueryAjaxSettings { 
  async?: boolean; 
  cache?: boolean; 
  contentType?: any; 
  headers?: { [key: string]: any; }; 
  //... 
} 

interface JQueryXHR { 
  responseJSON?: any; //... 
}

它给了我们更多的信息。

  • 这个函数的第一个参数是一个字符串。
  • settings参数是可选的。我们可以看到可以传递给函数的所有选项,不仅仅是它们的名字,还包括它们的类型。
  • 该函数返回一个JQueryXHR对象,我们可以看到它的属性和函数。

键入的签名肯定比无类型的签名更长,但是:string,JQueryAjaxSettings和JQueryXHR并不混乱。它们是提高代码可理解性的重要文档。我们可以在更大程度上了解代码,而无需深入实施或阅读文档。我个人的经验是,我可以更快地读取类型化代码,因为类型提供了更多的上下文来了解代码。但如果任何读者可以找到关于类型如何影响代码可读性的研究,请发表评论。

与其他编译为JavaScript的语言相比,TypeScript的类型是可选的,jQuery.ajax(url, settings)仍然是有效的typescript。所以并不是非开即关,TypeScript更多的是增强。如果发现代码在读取和理解时没有类型注释是微不足道的,请不要使用它们。只有在增加价值的情况下使用他们。

TypeScript是否限制表达?

动态类型的语言具有较差的工具,但它们更有韧性和表现力。我认为使用TypeScript会使得你的代码死板,但远比想象的程度要低。让我告诉你我的意思。假设我使用ImmutableJS定义个人记录。

const PersonRecord = Record({name:null, age:null}); 

function createPerson(name, age) { 
  return new PersonRecord({name, age}); 
} 

const p = createPerson("Jim", 44); 

expect(p.name).toEqual("Jim");

我们如何确定记录的类型?让我们来定义一个Person接口。

interface Person { name: string, age: number };

如果我们尝试执行以下操作:

function createPerson(name: string, age: number): Person { 
  return new PersonRecord({name, age}); 
}

TypeScript编译器就会警告,因为编译器不知道PersonRecord和Person类型兼容。一些有函数式编程经验的人会说:“TypeScript只有依赖类型!”。但是不是这样的。TypeScript的类型系统不是最先进的。但它的目标是不同的。这不是证明程序是100%正确的。它更多的是提供给你更多的提示信息和启用更强大的工具。所以当类型系统不够灵活时,可以采取快捷方式。所以我们可以转换创建的记录,通过下面这样:

function createPerson(name: string, age: number): Person { 
  return <any>new PersonRecord({name, age}); 
}

类型实例:

interface Person { name: string, age: number }; 

const PersonRecord = Record({name:null, age:null}); 

function createPerson(name: string, age: number): Person { 
  return <any>new PersonRecord({name, age}); 
} 

const p = createPerson("Jim", 44); 

expect(p.name).toEqual("Jim");

这段代码能够正常运行是因为类型系统是结构化的。只要创建的对象具有正确的属性-name和age,就能正常运行。

你需要以拥抱的心态去使用TypeScript的快捷方式。只有这样,你会发现使用这种语言非常的愉快。 例如,不要尝试添加类型到一些时髦的元编程代码 - 很可能你将无法静态地表达。遇到这种情况,可以配置类型检查忽略他们。这种情况下,你的代码不会失去太多的表达力,同时又具有工具化和可分析的特性。

这类似于试图获得100%的单元测试代码覆盖率。而95%通常不是那么困难,100%可能是具有挑战性的,可能会对您的应用程序的体系结构产生负面影响。

可选类型系统还保留了JavaScript开发工作流程。您的应用程序代码库的大部分可能会“损坏”,但您仍然可以运行它。TypeScript将继续生成JavaScript,即使类型检查器提示错误。这在开发过程中非常有用。

为什么使用TypeScript?

今天有很多选项可供前端开发人员使用:ES5,ES6(Babel),TypeScript,Dart,PureScript,Elm等。所以,为什么选择TypeScript?

让我们从ES5开始。ES5跟TypeScript相比,他不需要转换。这样可以使得你的构建设置保持简单。你不需要添加文件监视器,转换代码,生成source map。它就能工作。

ES6需要一个转换器,所以构建设置与TypeScript不会有很大的不同。但它是一个标准,这意味着每一个编辑器和构建工具都支持ES6或将支持它。这是一个较弱的论据,它曾经是大多数编辑器在这一点上具有优秀的TypeScript支持。

Elm和PureScript是具有强大类型系统的优雅语言,可以提供比TypeScript更多的功能。用Elm和PureScript编写的代码可能比ES5中类似的代码更简单。

每个这些选项都有利弊,但我认为TypeScript是一个很好的选择,使其成为大多数项目的绝佳选择。TypeScript占用良好静态类型语言的95%,并将其带入JavaScript生态系统。你仍然可以写ES6:你仍然可以继续使用相同的标准库,相同的第三方库,相同的成语和许多相同的工具(例如,Chrome开发工具)。它给了你很多,而不会强迫你离开JavaScript生态系统。

我是钟钟

我是钟钟

粉丝 53
博文 43
码字总数 40311
作品 1
深圳
高级程序员
私信 提问
加载中
此博客有 31 条评论,请先登录后再查看。
记一次失败的Perl + Nginx + FastCGI 配置过程

这两天心血来潮,不知道为什么和 Perl + Nginx + FastCGI 配置 耗上了。但是失败了,记录如下: 1)安装Nginx 1.4.3 ,我的是WINDOWS 7 系统,修改配置文件如下: location ~ .(pl|cgi|perl)?...

通吃岛-低手哥
2013/10/27
1.6K
7
Chrome页面自动刷新插件--smartF5

smartF5是一款chrome插件,用以实现监控页面资源,并自动刷新。 特别适合双屏情况下的DEMO开发,大大提高页面开发效率。 让你键盘上的F5键退休吧! 为什么选择smartF5 本插件具有以下特色: ...

YanisWang
2013/04/04
1.2W
0
AngularJS 的UI增强指令集--AngularUI

Angular UI 顾名思义,AngularJS 的UI增强指令集,提供了IE、jQuery 兼容,以及一些常用 UI 组件。 包含的模块有: UI-Utils UI-Modules UI-Alias UI-Bootstrap NG-Grid UI-Router IDE Plug...

匿名
2012/12/24
4.2W
0
RSS 阅读器--CommaFeed

CommaFeed 是 Google Reader 的开源实现,使用 Java ,基于 AX-RS, Wicket 和 AngularJS 开发。 直接发布到 OpenShift 平台的步骤: Create an account on OpenShift. Add an application, ......

匿名
2013/05/17
1W
8
Java工程师如何在Docker上进行开发

Java工程师如何在Docker上进行开发?本文能让你以最小的日常开支和预备知识就可以把Docker和Java结合使用。 安装 现在有很多的Java Web框架,挑选一个非常小的框架,选择Spark吧!它是一款基...

dockerer
2015/12/04
8.3K
20

没有更多内容

加载失败,请刷新页面

加载更多

叮! Q币派送中,快来看看你中奖了吗?

中奖名单新鲜出炉啦! 大家好 为了感谢大家一直以来对我们公众号的关注和支持 D妹来给大家发!奖!品!了! 是哪几位幸运鹅 能把这30Q币收入囊中? 赶紧过来康康吧! 也欢迎各位后续多多分享...

腾讯云DNSPod
今天
24
0
Qt音视频开发5-vlc事件订阅

一、前言 事件订阅可以拿到文件长度、播放进度、播放状态改变等信息,vlc的事件订阅机制封装的比较友好,只需要先创建一个事件管理器,然后逐个订阅自己感兴趣的需要的事件,不感兴趣的可以不...

飞扬青云
29分钟前
18
0
酒精和药物影响下出现交通事故的频率

导读: 在酒精或药物影响下驾驶,已被认为是与发生潜在交通事故和出现严重伤亡结果相关的关键因素[1]。2016年,美国酒驾事故导致10,497人死亡,占当年交通事故死亡总人数的28%,其死亡总人数...

科研菌
昨天
0
0
高可用高并发的 9 种技术架构!

来源:androidchina http://www.androidchina.net/7928.html 1、分层 分层是企业应用系统中最常见的一种架构模式,将系统在横向维度上切分成几个部分,每个部分负责一部分相对简单并比较单一...

Java技术栈
30分钟前
23
0
联盟链要对区块链做减法

当前联盟链平台在公有链的基础上,对共识机制做调整,去掉公有属性,使得准入可控、效率提升,这实际上是对区块链在做减法。但这是否足够呢? 我们在应用中很快发现,联盟链的使用比较受限制...

FISCO-BCOS开源社区
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部