什么是 TypeScript？为什么我要用它代替 JavaScript？[关闭]

StackOverflow https://stackoverflow.com//questions/12694530

  •  12-12-2019
  •  | 
  •  

题

您能描述一下 TypeScript 语言是什么吗？

它能做什么 JavaScript 或可用库不能做的事情，这让我有理由考虑它？

有帮助吗？

解决方案

我最初写过这个答案仍然存在 热息压力机。五年后，这是一个好的概述，但看 在 lodewijk的答案下面的更多深度

1000英尺浏览...

typescript 是一个javascript的超集，主要提供可选的静态键入，类和接口。其中一个大的好处是使IDE能够提供更丰富的环境，以便在键入代码时发现常见错误。

要了解我的意思，请注意 Microsoft的介绍性视频语言。

对于大型javascript项目，采用打字的软件可能会导致更强大的软件，同时仍可在常规JavaScript应用程序运行的情况下部署。

它是开源的，但如果您使用受支持的IDE键入，则只能获得巧妙的IntelliSense。最初，这只是Microsoft的Visual Studio（在 miguel de iCaza中）。这些天，其他ides提供翻页支持太多了。

是其他技术吗？

有 coffeescript ，但这真的是有不同的目的。恕我直言，CoffeeScript为人类提供可读性，但是通过可选的静态键入来为 Tools 提供深度可读性（请参阅此最近的博客文章有点批评）。还有 dart ，但这是一个完整的替代javascript（但它可以生成JavaScript代码）< / p>

示例

作为一个例子，这是一些类型的标注（你可以在 typescript playsground ） 

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
.

以及它将产生的javascript 

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
.

注意键字iscift如何定义成员变量和类方法参数的类型。将其转换为JavaScript时删除，但是由IDE和编译器使用以发现错误，例如将数字类型传递给构造函数。

它还能够推断出未明确声明的类型，例如，它将确定greet()方法返回字符串。

调试类型签字

许多浏览器和IDE通过Sourcemaps提供直接调试支持。有关更多详细信息，请参阅此堆栈溢出问题：使用Visual Studio < / p>

想要了解更多？

我最初写了这个答案，当打字签字仍然热息 - 按下。检查 lodewijk's答案这个问题是否有更多现有细节。

其他提示

TypeScript 与 JavaScript 的关系

Typescript是javaScript的键入超集，它将汇编为普通的JavaScript- typescriptlang.org.

JavaScript 是一种编程语言，由 EMCA 技术委员会 39, ，这是由许多不同的利益相关者组成的一群人。TC39 是一个由 欧洲制造商协会:内部标准组织。JavaScript 有许多不同供应商的不同实现（例如谷歌、微软、甲骨文等）。JavaScript 的目标是成为网络的通用语言。

TypeScript 是 JavaScript 语言的超集，具有单个开源编译器，并且主要由单个供应商开发：微软。TypeScript 的目标是通过类型系统帮助尽早发现错误，并使 JavaScript 开发更加高效。

本质上，TypeScript 通过三种方式实现其目标：

  1. 支持现代 JavaScript 功能 - JavaScript 语言（而不是运行时）通过 ECMA脚本 标准。并非所有浏览器和 JavaScript 运行时都支持所有 ECMAScript 标准的所有功能（请参阅此 概述）。TypeScript 允许使用许多最新的 ECMAScript 功能，并将它们转换为您选择的较旧的 ECMAScript 目标（请参阅列表 编译目标 在下面 --target 编译器选项）。这意味着您可以安全地使用新功能，例如模块、lambda 函数、类、扩展运算符和解构，同时保持与旧版浏览器和 JavaScript 运行时的向后兼容。

  2. 高级类型系统 - 类型支持不是 ECMAScript 标准的一部分，并且可能永远不会是由于 JavaScript 的解释性质而不是编译性质。TypeScript 的类型系统非常丰富，包括：接口、枚举、混合类型、泛型、并集/交集类型、访问修饰符等等。这 官方网站 TypeScript 概述了这些功能。Typescript 的类型系统与大多数其他类型语言相当，并且在某些情况下可以说更强大。

  3. 开发者工具支持 - TypeScript 的编译器可以作为后台进程运行，以支持增量编译和 IDE 集成，以便您可以更轻松地导航、识别问题、检查可能性和重构代码库。

TypeScript 与其他 JavaScript 目标语言的关系

与编译为 JavaScript 的其他语言相比，TypeScript 具有独特的理念。JavaScript 代码是有效的 TypeScript 代码；TypeScript 是 JavaScript 的超集。你几乎可以重命名你的 .js 文件到 .ts 文件并开始使用 TypeScript（请参阅下面的“JavaScript 互操作性”）。TypeScript 文件被编译为可读的 JavaScript，因此可以迁移回来，并且理解编译后的 TypeScript 并不困难。TypeScript 建立在 JavaScript 的成功基础上，同时改进了它的弱点。

一方面，您拥有面向未来的工具，它们采用现代 ECMAScript 标准并将其编译为较旧的 JavaScript 版本，其中 Babel 是最流行的版本。另一方面，您拥有的语言可能与 JavaScript 完全不同，这些语言以 JavaScript 为目标，例如 CoffeeScript、Clojure、Dart、Elm、Haxe、Scala.js 以及更多其他语言（请参阅此 列表）。尽管这些语言可能比 JavaScript 的未来更好，但它们面临着无法获得足够的采用以保证其未来的更大风险。您可能还很难找到其中一些语言的经验丰富的开发人员，尽管您会找到的开发人员通常更热情。与 JavaScript 的互操作也可能会涉及更多一些，因为它们与 JavaScript 的实际含义相距甚远。

TypeScript 位于这两个极端之间，从而平衡了风险。从任何标准来看，TypeScript 都不是一个冒险的选择。如果您熟悉 JavaScript，那么您只需花很少的力气就可以习惯，因为它不是一种完全不同的语言，具有出色的 JavaScript 互操作性支持，并且最近得到了广泛的采用。

可选静态类型和类型推断

JavaScript 是动态类型的。这意味着 JavaScript 不知道变量是什么类型，直到它在运行时实际实例化为止。这也意味着可能为时已晚。TypeScript 为 JavaScript 添加了类型支持。如果您正确地处理问题（您输入代码的严格程度或是否输入代码完全取决于您），则可以完全消除因某些变量属于某种类型的错误假设而导致的错误。

通过使用类型推断，TypeScript 使输入变得更加容易并且更加不那么明确。例如： var x = "hello" 在 TypeScript 中是相同的 var x : string = "hello". 。该类型可以简单地从其用途中推断出来。即使您没有显式键入类型，它们仍然可以帮助您避免执行某些操作，否则会导致运行时错误。

默认情况下，TypeScript 可以选择输入。例如 function divideByTwo(x) { return x / 2 } 是 TypeScript 中的有效函数，可以使用以下命令调用 任何 类型的参数，即使使用字符串调用它显然会导致 运行 错误。就像您在 JavaScript 中所习惯的那样。这是可行的，因为当没有显式分配类型并且无法推断类型时，就像在divideByTwo 示例中一样，TypeScript 将隐式分配类型 any. 。这意味着divideByTwo函数的类型签名自动变为 function divideByTwo(x : any) : any. 。有一个编译器标志禁止这种行为： --noImplicitAny. 。启用此标志可以为您提供更高程度的安全性，但也意味着您将不得不进行更多输入。

类型有与之相关的成本。首先，有一个学习曲线，其次，当然，使用正确的严格类型设置代码库也会花费您更多的时间。根据我的经验，对于您与他人共享的任何重要的代码库来说，这些成本都是完全值得的。 Github 上编程语言和代码质量的大规模研究 建议 “一般来说，静态类型语言比动态类型更不容易出现缺陷，并且在同一方面，强类型优于弱类型”。

有趣的是，这篇论文发现 TypeScript 比 JavaScript 更不容易出错：

对于那些具有正系数的人，我们可以期望该语言与Ceteris Paribus相关联，更多的缺陷修复程序。这些语言包括 C、C++、 JavaScript, ，Objective-C，PHP和Python。语言 Clojure、Haskell、Ruby、Scala 和 打字稿，所有这些都有负数，这意味着这些语言的可能性少于平均值导致缺陷固定提交的可能性。

增强的 IDE 支持

使用 TypeScript 的开发体验比 JavaScript 有了很大的提升。TypeScript 编译器实时向 IDE 通报其丰富的类型信息。这带来了几个主要优点。例如，使用 TypeScript，您可以安全地进行重构，例如跨整个代码库重命名。通过代码完成，您可以获得有关库可能提供的任何功能的内联帮助。不再需要记住它们或在在线参考文献中查找它们。当您忙于编码时，编译错误会直接在 IDE 中以红色波浪线报告。总而言之，与使用 JavaScript 相比，这可以显着提高工作效率。人们可以花更多的时间编码，而花更少的时间调试。

有很多 IDE 对 TypeScript 具有出色的支持，例如 Visual Studio Code、WebStorm、Atom 和 Sublime。

严格的空值检查

表单的运行时错误 cannot read property 'x' of undefined 或者 undefined is not a function 通常是由 JavaScript 代码中的错误引起的。开箱即用的 TypeScript 已经降低了发生此类错误的可能性，因为无法使用 TypeScript 编译器未知的变量（除了以下属性之外）： any 类型变量）。但仍然有可能错误地使用设置为 undefined. 。然而，在 TypeScript 2.0 版本中，您可以通过使用不可空类型来消除这些类型的错误。其工作原理如下：

启用严格的空检查（--strictNullChecks 编译器标志）TypeScript 编译器不允许 undefined 分配给变量，除非您显式声明它为可为空类型。例如， let x : number = undefined 将导致编译错误。这完全符合类型理论，因为 undefined 不是一个数字。可以定义一个 x 是一个总和类型 number 和 undefined 纠正这个问题： let x : number | undefined = undefined.

一旦知道某个类型可为空，这意味着它的类型也可以为值 null 或者 undefined, ，TypeScript 编译器可以通过基于控制流的类型分析来确定您的代码是否可以安全地使用变量。换句话说，当你检查一个变量是 undefined 例如通过 if 语句，TypeScript 编译器将推断代码控制流该分支中的类型不再可为空，因此可以安全地使用。这是一个简单的例子：

let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.

在构建过程中，TypeScript 2016 年会议联合设计师 Anders Hejlsberg 对该功能进行了详细的解释和演示： 视频 （44:30 至 56:30）。

汇编

要使用 TypeScript，您需要一个构建过程来编译为 JavaScript 代码。构建过程通常只需要几秒钟，当然具体取决于项目的大小。TypeScript编译器支持增量编译（--watch 编译器标志），以便可以以更快的速度编译所有后续更改。

TypeScript 编译器可以在生成的 .js 文件中内联源映射信息或创建单独的 .map 文件。Chrome DevTools 和其他 IDE 等调试实用程序可以使用源映射信息，将 JavaScript 中的行与 TypeScript 中生成它们的行关联起来。这使您可以在运行时直接在 TypeScript 代码上设置断点并检查变量。源映射信息工作得很好，它早在 TypeScript 之前就已经存在了，但是调试 TypeScript 通常不如直接使用 JavaScript 时那么好。采取 this 例如关键字。由于语义的改变 this 自 ES2015 以来围绕闭包的关键字， this 实际上可能在运行时作为一个名为的变量存在 _this （看 这个答案）。这可能会让您在调试过程中感到困惑，但如果您了解它或检查 JavaScript 代码，通常不是问题。应该指出的是，Babel 也面临着完全相同的问题。

TypeScript 编译器还可以执行一些其他技巧，例如基于以下内容生成拦截代码 装饰者, 、针对不同模块系统生成模块加载代码并解析 JSX. 。但是，除了 Typescript 编译器之外，您可能还需要一个构建工具。例如，如果您想压缩代码，则必须在构建过程中添加其他工具才能实现此目的。

有 TypeScript 编译插件可用于 网页包, 咕噜咕噜, 咕噜声 以及几乎任何其他 JavaScript 构建工具。TypeScript 文档中有一节介绍 与构建工具集成 涵盖所有。A 棉绒 如果您想要更多的构建时间检查，也可以使用。还有大量的种子项目可以帮助您开始使用 TypeScript 并结合许多其他技术，如 Angular 2、React、Ember、SystemJS、Webpack、Gulp 等。

JavaScript 互操作性

由于 TypeScript 与 JavaScript 密切相关，因此它具有很强的互操作能力，但需要一些额外的工作才能在 TypeScript 中使用 JavaScript 库。 TypeScript 定义 需要这样，TypeScript 编译器才能理解函数调用，例如 _.groupBy 或者 angular.copy 或者 $.fadeOut 事实上并非非法言论。这些函数的定义位于 .d.ts 文件。

定义可以采用的最简单的形式是允许以任何方式使用标识符。例如，当使用 洛达什, 单行定义文件 declare var _ : any 将允许您调用任何您想要的函数 _, ，但是，当然，你仍然可能会犯错误： _.foobar() 这将是一个合法的 TypeScript 调用，但在运行时当然是一个非法调用。如果您想要正确的类型支持和代码完成，您的定义文件需要更准确（请参阅 洛达什定义 举个例子）。

Npm 模块 预先打包了自己的类型定义，TypeScript 编译器会自动理解（请参阅 文档）。对于几乎任何其他不包含自己定义的半流行 JavaScript 库，有人已经通过另一个 npm 模块提供了类型定义。这些模块以“@types/”为前缀，来自名为的 Github 存储库 绝对打字.

有一个警告：类型定义必须与您在运行时使用的库的版本相匹配。如果不这样做，TypeScript 可能会禁止您调用函数或取消引用存在的变量，或者允许您调用函数或取消引用不存在的变量，仅仅是因为类型与编译时的运行时不匹配。因此，请确保为您正在使用的库的正确版本加载正确版本的类型定义。

老实说，这有点麻烦，这可能是你不选择 TypeScript 的原因之一，而是选择像 Babel 这样根本不需要获取类型定义的东西。另一方面，如果您知道自己在做什么，则可以轻松克服由不正确或丢失定义文件引起的任何类型的问题。

从 JavaScript 转换为 TypeScript

任何 .js 文件可以重命名为 .ts 文件并通过 TypeScript 编译器运行，以获取语法上与输出相同的 JavaScript 代码（如果它首先在语法上是正确的）。即使 TypeScript 编译器出现编译错误，它仍然会产生 .js 文件。甚至可以接受 .js 文件作为输入 --allowJs 旗帜。这使您可以立即开始使用 TypeScript。不幸的是，一开始很可能会出现编译错误。人们确实需要记住，这些并不是像您在其他编译器中所习惯的那样显示停止错误。

由于 TypeScript 的性质，在将 JavaScript 项目转换为 TypeScript 项目时一开始出现的编译错误是不可避免的。TypeScript 检查 全部 代码的有效性，因此它需要了解使用的所有函数和变量。因此，所有类型都需要有适当的类型定义，否则必然会发生编译错误。正如上一章提到的，几乎所有 JavaScript 框架都有 .d.ts 通过安装可以轻松获取的文件 确定类型包. 。然而，您可能使用了一些不起眼的库，其中没有可用的 TypeScript 定义，或者您已经填充了一些 JavaScript 原语。在这种情况下，您必须为这些位提供类型定义，以使编译错误消失。只需创建一个 .d.ts 文件并将其包含在 tsconfig.json 中 files 数组，以便 TypeScript 编译器始终考虑它。在其中将 TypeScript 不知道的那些位声明为类型 any. 。一旦消除了所有错误，您就可以根据需要逐步在这些部分中引入打字功能。

还需要进行一些（重新）配置构建管道的工作，才能将 TypeScript 纳入构建管道。正如编译章节中提到的，有很多好的资源，我鼓励您寻找使用您想要使用的工具组合的种子项目。

最大的障碍是学习曲线。我鼓励您首先尝试一个小项目。看看它如何工作、如何构建、使用哪些文件、如何配置、如何在 IDE 中运行、如何构建、使用哪些工具等等。当您知道自己在做什么时，将大型 JavaScript 代码库转换为 TypeScript 是可行的。例如阅读此博客 72 小时内将 60 万行转换为打字稿）。在开始之前，请确保您已经很好地掌握了该语言。

采用

TypeScript 是开源的（Apache 2 许可，请参阅 GitHub）并得到微软的支持。 安德斯·海尔斯伯格, ，C# 的首席架构师正在领导该项目。这是一个非常活跃的项目；TypeScript 团队在过去几年中发布了许多新功能，并且仍计划推出许多出色的功能（请参阅 路线图).

关于采用和受欢迎程度的一些事实：

  • 在里面 2017 年 StackOverflow 开发者调查 TypeScript 是最受欢迎的 JavaScript 转译器（总体排名第九），并在最受欢迎的编程语言类别中获得第三名。
  • 在里面 2018 年 js 现状调查 TypeScript 被宣布为 JavaScript 风格类别中的两个大赢家之一（另一个是 ES6）。
  • 在里面 2019 年 StackOverlow 开发者调查 TypeScript 超越 C 和 C++，跃居专业开发人员最流行语言的第九位。它再次在最受欢迎的语言中排名第三。

打字条与CSS的少或SASS相似。它们是超级套装，这意味着您写入的每个JS代码都是有效的打字代码。此外，您可以使用它添加到语言的其他好东西，并发码代码将是有效的JS。您甚至可以设置所产生的代码的JS版本。

当前打字是一个超级ES2015，所以可能是开始学习新的JS功能并转换到项目所需标准的好选择。

“ 类型签字基础 ” - purlalsight视频 - 课程 <一个href=“https://www.pluralsight.com/uthors/dan-wahlin”> dan wahlin 和 John Papa 是一个非常好的，目前（2016年3月25日）更新以反映打字1.8，介绍TypeScript。

对于我来说真正的良好功能，除了IntelliSense的良好可能性之外，是类，接口，模块，易于实施AMD，以及在IE中调用时使用Visual Studio TypeScript调试器的可能性。

汇总：如果用作预期的，打字标准可以使JavaScript编程更可靠，更容易。它可以通过完整的SDLC显着提高JavaScript程序员的生产率。

ecma脚本5（ES5）所有浏览器支持和预编译。今年的ES6 / ES2015和ES / 2016年出现了许多变化，以便弹出这些变化，之间有一些东西应该关注所以类型的标语。

•打字键是类型 - >意味着我们必须定义每个属性和方法的数据类型。如果你知道C＃，那么打字录得很容易理解。

•根据生产前提前的版本的大优势是我们的身份相关问题。如果存在任何类型不匹配，则允许单元测试失败。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top