【TypeScript 必学必会 ①】 关于TypeScript你必须知道的一切

目录

一、什么是 TypeScript ？

TypeScript 是在 JavaScript 基础上的一种语言。在 JavaScript 中可以实现的一切都可以在 TypeScript 中实现，它是JavaScript的超集。它提供了两个强大的优势。

• 第一个是它 将TypeScript转译成JavaScript ，所以所有浏览器都无法使用的高级ECMAScript功能可以通过提供一个polyfill来使用。它就像其他静态检查器与Babel的结合体一样。
• TypeScript的第二个优势是，它可以 强制执行静态类型化 ，在开发的生命周期中更早地捕捉潜在的问题。它减少了对一些单元测试的需求，并能在设计时分析代码以发现运行时错误。

TypeScript在2012年10月1日被公开，但它的诞生是在两年前作为微软的内部产品（2010年）在Redmond开始的。并且是开源的，在Apache2许可下托管于Github.com。

TypeScript的知名度逐年提高。每两个月发布一个新版本的一致节奏和贡献者的伟大生态系统使其成为一个明星级的开源项目。它迅速发展以维持开发者的需求，并跟随网络技术的快速发展。

TypeScript 远没有被其创建者微软所使用。虽然许多微软产品确实使用了TypeScript，比如微软团队、Visual Studio团队服务（VSTS）、在线版 Office 和 Visual Studio 代码（VSCode），但至少可以说，其他技术巨头也在借用静态类型的优势。谷歌从 Angular 2 开始使用TypeScript，Slack 也将他们的 JavasScript 代码库迁移到 TypeScript，其他公司如 Ubisoft、Asana、Ericsson、Upwork、Bloomberg 和 Lyft 也在跟进。我之所以提到这些使用 TypeScript 的公司，是为了强调成千上万的开发者和数百万行在这些技术上的投资。他们中的大多数人来自不同的背景。除了整个行业倾注的巨大工作和知识外，它还说明了在你之前的许多人不得不决定是否使用 TypeScript，并且选择了这样做。虽然提供的大多数例子都是大项目，但它们都有一个共同点，即有些人必须编写和维护代码。静态类型在这些方面大放异彩，从小型项目到大型项目。

以下是关于 TypeScript 创作者的简要说明：Anders Hejlsberg 目前负责管理 TypeScript。他是 Turbo Pascal、Delphi、C#，以及现在的TypeScript 的创造者。Hejlsberg 毕业于80年代，在他的职业生涯中获得了许多奖项，并且是 GitHub 上该项目提交次数最多的人。有这样一位多产的工程师担任 TypeScript 的负责人，提升了该语言的成熟度。

TypeScript 社区已经超越了它所在的存储库，有很多例子，TypeScript代码与许多不同的框架。要找到用 TypeScript 编写的 Angular 或 React 的例子或像著名的 TodoMVC 这样的流行项目并不难。

TypeScript 在设计时都有一个强类型的语言，但产生的代码并不包含任何类型。类型被抹去了，因为 Typescript 在转译时删除了类型、接口、别名，最后得到了一个普通的 JavaScript 文件。这种删除听起来很合乎逻辑，但在运行时缺乏类型的结果是，在设计中不能在运行时动态地依赖类型。在进行类型比较以弄清所使用的接口时，我们会看到这方面的例子。

请记住，接口和类型在运行时是不可用的。因此，如何进行这种检查？

如果你不了解 JavaScript 运行时，可以看一下这一篇：https://olinations.medium.com/the-javascript-runtime-environment-d58fa2e60dd0

二、关于 TypeScript 的理念

TypeScript 有明确的设计目标，激励开发者们遵循其总体理念。

• 主要的一点是 识别会产生运行时错误的结构 。
• 其次，TypeScript 的目标是 提供一种可以扩展到大型代码库的结构化机制 。在大量不同的开发人员和大量代码的情况下，JavaScript 可能难以维护。这第二个目标包含了第一个目标，它允许修改和尽快被告知潜在的问题。类型还可以自我记录代码，并为特定的变量规定了潜在的值。
• 第三个目标是 不要把开销强加在产生的 JavaScript 上 。这个目标与第四个目标是相辅相成的，即产生干净和可识别的 JavaScript。TypeScript的最终输出是 JavaScript 代码，根据你指定的你希望输出的版本，它将产生最可读、最有效、最干净的代码。其结果将是人类可以使用的，这是实验 TypeScript 的一个好方法。它也将能够决定停止，然后继续使用 JavaScript，但这也是一种很好的调试方式。
• 第五个目标是，通过 使其可组合性和易于浏览 ，拥有一种能够在未来良好发展的语言。
• 第六个目标，本着兼容未来的精神 ，TypeScript的目标是与ECMAScript保持一致 ，不仅是当前的版本，也包括未来的版本。
• 第七个目标是 避免添加表达式级别的语法 ，这再次保留了接近 JavaScript 的语法，而不会使其成为一种全新的语言。TypeScript 并不试图取代 JavaScript。保留运行时行为使得 TypeScript 与所有现有的 JavaScript 代码兼容。对于有经验的 JavaScript 开发者来说，这也是一个很好的工具，可以让他们直接开始使用 TypeScript 的库和函数。

TypeScript 带来了类型 ，这意味着 它需要有一个结构化的系统（例如，接口、类型、类） 。然而，我们的目标是 在运行时去除这一层，再次确保输出与ECMAScript完全兼容。

虽然微软努力不成为特定操作系统或浏览器背后的围墙花园，或像 IDE 一样的任何其他限制，但 TypeScript 在 Mac 和 Windows 上都能工作，而且输出在所有浏览器上都能工作，因为 它始终遵循 ECMAScript 标准。 它还与许多开发工具兼容，不偏爱任何特定的生态系统。TypeScript 提供了一个允许外部 IDE 与之通信的工具，为第三方实现了极大的可扩展性。

最后，最后一个设计目标是与其他微软产品向后兼容。关心过去是一个巨大的胜利，是一个长期项目的最重要的收获。你今天编码的东西在未来也会起作用，这也是 TypeScript 的核心概念的一部分。然而，自版本1以来，向后兼容性一直是真实的，TypeScript 团队的工作原则是不引起任何实质性的破坏性变化。

重要的是要明白，TypeScript 并不是要在有缺陷的语言之上创建一个完美的语言 。它使用现有的 JavaScript. 行为并与之配合。TypeScript 总是在正确性和生产性之间摇摆不定。这种平衡对于保持开发者的高生产力非常重要。TypeScript 并不试图创新或带来新的开发思维方式。相反， 它利用了许多语言已知的常见模式，同时保持了JavaScript 的灵活性。

三、为什么我劝你使用 TypeScript ？

1、TypeScript 很快

即使它有一个名为

transpile

的编译阶段，但它在大型代码库中也能很好地扩展。你不需要转译每一个 TypeScript 文件，因为你可以转译一个子集，比如一个已经改变的文件，或者一个目录。

快速是开发流程的关键。JavaScript 的优势在于它是一种运行时语言，并且有一个中间环节，这不是一个负担；它为那些希望在浏览器中获得快速结果的人减少了复杂性。同样，在第三方改变的文件上也可以自动构建。TypeScript 和其他工具的结合将经验转化为一个准无缝的流程。

2、转译生成ECMAScript

使用 JavaScript 时如果你不用babel，那么你不能编译为指定ES标准版本，而 TypeScript 让你 指定想要的ECMAScript版本。 这种详细程度意味着你可以生成与非常老的浏览器或新的浏览器兼容的JavaScript，或者与计划中的但尚未出现的功能兼容。输出的是一个不同的JavaScript，取决于哪个目标。这个功能 允许你使用现代的TypeScript语法； 例如，async 不是今天所有浏览器完全支持的，但TypeScript 可以针对不支持它的 ECMAScript 版本。

TypeScript 将保持不变，因为它借用了 ECMAScript 的标准语法， 产生的 JavaScript 将根据目标的不同而不同。一个旧的目标版本将提供polyfill ， 它的性能较差，但仍将为用户产生相同的行为。

瞄准一个较新的版本，可以利用本地浏览器对功能的支持，将是高性能的，而且也会产生一个干净的JavaScript。在async的例子中，对于不支持本机的旧版本ECMAScript，会使用promise方法，但对于最新的版本则直接使用async语法。

3、兼容你知道的 JavaScript 库与框架

TypeScript 让你使用你作为客户端开发者已经知道的库和框架，你可以使用 Jquery，MomentJS，BootStrapJS，React，Vue 等，没有任何限制。除了降低门槛之外，TypeScript、JavaScript 拥有相同的生态系统。

4、使用于 npm

NPM 可以访问数以百万计的可用库，并且已经被测试了很多年。避免使用一个自定义的工具来访问库，简化了跳转到TypeScript的过程，因为不需要学习新的语言和新的工具。同样的NPM命令也适用于TypeScript来访问定义文件。

5、支持静态类型化

不严格

仍然是一个可用的选择。当

混合模式

可能是唯一可行的选择时，这是一个明智的选择。

当开始一个新项目时，建议启用

严格模式

，这可以强制执行类型。尽管如此，TypeScript 会让你你逐步添加类型，对于刚开始入门的话是个不错的选择，能够将 TypeScript 带入现有的 JavaScript 项目。

混合选项

可以慢慢引入静态类型，而不必因为巨大的迁移而停止现有的开发。你可以按照自己的节奏进行。事实上，TypeScript可以针对现有的JavaScript代码运行，甚至在可实现的边界内提供推理和一套最低限度的验证。

6、重构更容易

由于静态类型化，TypeScript 可以更容易的进行重构。
如果你重命名一个成员，它可以在所有被使用的地方发现，因此在任何地方都可以被直接重命名。改变一个类型将直接在你使用的IDE中或在编译过程中突出不兼容。很多功能都是如此，比如改变一个成员是否是可选的，或者添加、删除或修改一个函数的参数。在TypeScript代码中的导航是很容易的，因为你可以导航到函数或成员的引用，因为IDE可以链接特定类型的使用和它们的内容。

7、TypeScript更容易维护

这是因为阅读代码比 JavaScript 更容易。例如，一个用选项初始化的对象，在 JavaScript 中不会明确定义所有潜在的选项。通常情况下，如果你是第一次接触一段使用参数为对象的代码，你需要查看函数内部，并尽可能地遵循它。.你也可以看看单元测试或文档，如果它们可用的话。在所有情况下，这都是很耗时的。

使用TypeScript，你可以看一下类型，点击它，然后看到定义。这很快，自带文档，而且无需挖掘就能提供洞察力。

8、可以定义一个现有的 JavaScript 库

这被称为 “定义文件”。定义文件是可选的，但是当提供给JavaScript库的代码时，它可以给 TypeScript 的代码带来智能提示以及类型。这通过减少潜在的错别字和将文档摆到你的面前，来提高开发人员的生产力。这也减少了因切换到外部文档而失去注意力。

9、有出色的智能提示功能

如前所述，现有的 JavaScript 库可以获得 TypeScript 的类型。同时，TypeScript 默认是完全支持 Intellisense 的，这意味着每一个定义的类型都可以提供类型成员、函数参数、类型和返回等。

10、减少了单元测试的数量

检查对象上的类型（结构）或预期的成员变量，或由参数传递的未定义和空值的类型，都是TypeScript在编译时检查静态类型的情况。更少的代码意味着更少的代码需要维护。单元测试只关注有意义的事情，如逻辑或实际算法。

11、缓解了只有在运行时才能发现的潜在隐患

JavaScript 有很多问题，TypeScript 通过在开发时暴露这些问题，来减轻只能在运行时发现的潜在隐患。TypeScript 可以让你微调它如何为你驾驭这些问题。例如，JavaScript的 Math 是相当宽松的。另外，特定的值可以在值比较时被解释。这样是不是就很轻松了。

12、技术选型风险低

最后，TypeScript 是一个低风险的选择，因为它产生了人类可读的JavaScript，这就像一个出口门大开，可以在未来开始和停止。也因为它是开源的，这意味着在微软停止维护该语言的情况下，任何人都可以其他技术。也就是说，微软、谷歌和其他大公司已经在TypeScript上投资了数百万，这对小公司来说也应该是一个很好的指标。最后，风险很低，因为对于一个JavaScript开发者来说，学习曲线很温和。

三、快速上手 TypeScript

默认你已经安装 node

安装 typescript

npminstall -g typescript

新建一个

hi.ts

的文件

const msg:string="Hello World";//这是ts写法，暂时不需要掌握，后续会讲到console.log(msg);

运行命令，执行编译

tsc hi.ts

生成的 js 文件里则将 ts 语法转换成了 js 语法。

后面你可以配合你喜欢的 IDE 与脚手架，使用 ts 方面进行开发与学习