什么是TypeScript,为什么要用它来代替JavaScript?
能否请您介绍一下TypeScript语言是什么?
它能做哪些JavaScript或现有库不能做的事情,让我有理由考虑它?
1630
3
能否请您介绍一下TypeScript语言是什么?
它能做哪些JavaScript或现有库不能做的事情,让我有理由考虑它?
1000ft view...
[TypeScript][1]是JavaScript的超集,主要提供可选的静态类型、类和接口。其中一个很大的好处是使IDE能够提供一个更丰富的环境,在你输入代码时*发现常见的错误。要想了解我的意思,请观看Microsoft'的介绍性视频,了解该语言。
对于一个大型的JavaScript项目来说,采用TypeScript可能会带来更强大的软件,同时仍然可以在普通JavaScript应用程序运行的地方进行部署。
它是开源的,但只有当你使用支持的IDE时,你才能在输入时得到聪明的Intellisense。最初,这只是微软的Visual Studio(在Miguel de Icaza的博文中也提到)。如今,其他IDE也提供TypeScript支持。
还有其他类似的技术吗?
有[CoffeeScript][5],但这确实是一个不同的目的。我认为,CoffeeScript为人类提供了可读性,但TypeScript也通过其可选的静态类型为*工具提供了深入的可读性(见这篇[最近的博文][6],以了解更多的评论)。还有[Dart][7],但这是对JavaScript的完全替代(尽管它[可以产生JavaScript代码][8])。例子
作为一个例子,这里有一些TypeScript(你可以在TypeScript Playground中玩这个)。
这里是它将产生的JavaScript
注意TypeScript是如何定义成员变量和类方法参数的类型的。这在翻译成JavaScript时被删除了,但被IDE和编译器用来发现错误,比如向构造函数传递一个数字类型。
它还能够推断出没有明确声明的类型,例如,它将确定
greet()
方法返回一个字符串。调试Typescript
/h2> 许多浏览器和IDE通过源码图提供直接的调试支持。更多细节请见Stack Overflow的这个问题。用Visual Studio调试TypeScript代码 。
想了解更多?
我最初写这个答案时,Typescript还在热火朝天地进行着。请看[Lodewijk'的回答][11],以了解更多的最新细节。TypeScript'与JavaScript的关系
在构建期间,2016年会议上TypeScript的联合设计者Anders Hejlsberg对这一功能进行了详细的解释和演示。视频 (从44:30到56:30)。
编译
要使用TypeScript,你需要一个构建过程来编译成JavaScript代码。构建过程一般只需要几秒钟,当然,这取决于你的项目的大小。TypeScript编译器支持增量编译(
--watch
编译器标志),这样所有的后续修改都可以以更快的速度编译。 TypeScript编译器可以在生成的.js文件中内联源码图信息或创建单独的.map文件。源码图信息可以被调试工具使用,如Chrome DevTools和其他IDE's,将JavaScript中的行与TypeScript中生成的行联系起来。这使得你可以在运行期间直接在TypeScript代码上设置断点和检查变量。源码图信息工作得很好,它在TypeScript之前就已经存在了,但是调试TypeScript通常没有直接使用JavaScript时那么好。以this
关键字为例。由于自ES2015以来,围绕闭包的this
关键字的语义发生了变化,this
实际上在运行时可能作为一个叫做_this
的变量存在(见本回答)。在调试过程中,这可能会使你感到困惑,但如果你知道这一点或检查JavaScript代码,一般不会有问题。需要注意的是,Babel也有完全相同的问题。 TypeScript编译器还可以做一些其他的技巧,比如基于装饰器生成拦截代码,为不同的模块系统生成模块加载代码,以及解析JXX。然而,除了Typescript编译器之外,你很可能还需要一个构建工具。例如,如果你想压缩你的代码,你将不得不在构建过程中添加其他工具来实现。 在Webpack、Gulp、Grunt和其他几乎所有的JavaScript构建工具中都有TypeScript编译插件。TypeScript文档中有一个关于与构建工具集成的部分,涵盖了所有这些工具。如果你想要更多的构建时间检查,也可以使用linter。还有大量的种子项目,可以让你开始使用TypeScript与其他一些技术相结合,如Angular 2、React、Ember、SystemJS、Webpack、Gulp等。JavaScript的互操作性
由于TypeScript与JavaScript密切相关,它有很好的互操作能力,但要在TypeScript中与JavaScript库协同工作,还需要一些额外的工作。需要TypeScript定义,以便TypeScript编译器理解像
_.groupBy
或angular.copy
或$.fadeOut
这样的函数调用实际上不是非法语句。这些函数的定义被放在.d.ts
文件中。 定义的最简单形式是允许一个标识符以任何方式使用。例如,当使用Lodash时,一个单行定义文件declare var _ : any
将允许你在_
上调用任何你想要的函数,但这样,当然,你也仍然能够犯错误。_.foobar()
将是一个合法的TypeScript调用,但在运行时当然是一个非法调用。如果你想要正确的类型支持和代码完成,你的定义文件需要更加精确(见lodash定义的例子)。 Npm模块 预先打包了自己的类型定义的模块会被TypeScript编译器自动理解(见文档)。对于几乎所有其他不包括自己定义的半流行的JavaScript库,有人已经通过另一个npm模块提供了类型定义。这些模块的前缀是"@types/",来自一个叫做DefinitelyTyped的Github资源库。 有一个注意事项:类型定义必须符合你在运行时使用的库的版本。如果它们不匹配,TypeScript可能会不允许你调用一个存在的函数或解除对一个变量的引用,或者允许你调用一个不存在的函数或解除对一个变量的引用,仅仅是因为类型在编译时与运行时不符。所以要确保你为你所使用的库的正确版本加载正确的类型定义。 说实话,这有一点麻烦,这可能是你不选择TypeScript的原因之一,而是去选择像Babel这样的东西,因为它根本不受必须获得类型定义的影响。另一方面,如果你知道你在做什么,你可以很容易地克服由不正确或丢失定义文件引起的任何类型的问题。从JavaScript转换到TypeScript
任何
.js
文件都可以被重命名为.ts
文件,并通过TypeScript编译器运行,得到语法相同的JavaScript代码作为输出(如果它首先在语法上是正确的)。即使TypeScript编译器出现编译错误,它仍然会产生一个.js
文件。它甚至可以用--allowJs
标志接受.js
文件作为输入。这使你可以立即开始使用TypeScript。不幸的是,在开始时可能会出现编译错误。我们需要记住,这些错误并不像你在其他编译器中可能会遇到的那样,会让你感到震惊。在将JavaScript项目转换为TypeScript项目时,一开始就会出现编译错误,这是TypeScript的本质所决定的,是无法避免的。TypeScript检查所有代码的有效性,因此它需要知道所有使用的函数和变量。因此,所有的类型定义都需要到位,否则必然会发生编译错误。正如上面一章所提到的,对于几乎所有的JavaScript框架都有
.d.ts
文件,可以通过安装DefinitelyTyped包轻松获得。然而,你可能使用了一些晦涩难懂的库,而这些库没有TypeScript的定义,或者你已经填充了一些JavaScript原语。在这种情况下,你必须为这些位提供类型定义,以使编译错误消失。只要创建一个.d.ts
文件并将其包含在tsconfig.json的files
数组中,这样TypeScript编译器就会一直考虑它。在其中声明那些TypeScript不知道的位,作为any
类型。一旦你消除了所有的错误,你就可以根据你的需要逐步将类型化引入到这些部分。 为了让TypeScript进入构建管道,还需要对构建管道进行一些(重新)配置的工作。正如在编译一章中提到的,外面有很多好的资源,我鼓励你寻找使用你想使用的工具组合的种子项目。 最大的障碍是学习曲线。我鼓励你一开始就用一个小项目来玩。看看它是如何工作的,它是如何构建的,它使用哪些文件,它是如何配置的,它在你的IDE中是如何运作的,它是如何结构的,它使用哪些工具,等等。如果你知道自己在做什么,将大型 JavaScript 代码库转换为 TypeScript 是可行的。阅读这篇博客,以在72小时内将60万行转换为TypeScript为例)。)只要确保你在跳转之前对语言有一个很好的掌握。采用
TypeScript是开源的(Apache 2许可,见GitHub),并得到微软的支持。C#的首席架构师Anders Hejlsberg正在带头执行这个项目。这是一个非常活跃的项目;TypeScript团队在过去几年中发布了很多新功能,而且还有很多很棒的功能计划要发布(见路线图)。 一些关于采用和流行的事实。
"TypeScript Fundamentals"--由Dan Wahlin和John Papa的Pluralsight视频课程是一个非常好的,目前(2016年3月25日)已经更新以反映TypeScript 1.8,介绍Typescript。
对我来说,真正好的功能是类、界面、模块、实现AMD的简易性,以及在IE中调用Visual Studio Typescript调试器的可能性。
总结一下。如果按照预期使用,Typescript可以使JavaScript编程更可靠,更容易。在整个SDLC中,它可以显著提高JavaScript程序员的生产力。