在过去的几年里，TypeScript的受欢迎程度一直在增加。它被提到了2020年最有前途的五种语言之一。Angular，最大的前端框架之一，正在使用TypeScript。大约60%的JS程序员已经使用TypeScript，22%的人希望尝试。为什么呢？
从历史上看，JavaScript最终成为了互联网上编写网页和应用程序的主要语言。现在，通过Node.js和Deno等框架，在前端和后端都可以使用JavaScript。
但是，JavaScript是用来创建像现代网络上的大型复杂系统的吗？不是的。
在这篇文章中，我们将向你介绍一个解决方案--TypeScript--并让你开始走向向你的JavaScript代码添加类型的道路。
以下是我们要介绍的一些要点:
- 什么是TypeScript？
- 什么是类型，它们在TS中是如何工作的？
- JavaScript与TypeScript：选择哪一个？
- 如何开始使用TypeScript。
- 学习 TypeScript 的更多资源。
什么是 TypeScript？
简而言之，TypeScript 是 JavaScript 的超集，具有可选类型，并可编译为普通 JavaScript。
更简单地说，TypeScript在技术上是具有静态类型的 JavaScript，只要你想拥有它。
现在，为JavaScript添加静态类型的原因是什么？
我至少可以列出三个:
- 你可以避免像经典的 "隐藏的忍者 "错误。
'undefined' is not a function. - 更容易对代码进行重构，而不会对其造成重大破坏。
- 在复杂的大规模系统中确定自己的方向不再是一场恶梦。
实际上，一项研究表明，15%的JavaScript错误可以通过TypeScript检测出来。
动态类型的自由常常导致bug的出现，这不仅降低了程序员的工作效率，而且还会因为增加新的代码行的成本而使开发陷入停顿。
因此，由于JavaScript未能纳入类型和编译时错误检查等内容，使得它成为企业和大型代码库中服务器端代码的糟糕选择。正如他们的标语所说，TypeScript是可以扩展的JavaScript。
使用 TypeScript，我需要学习什么？
TypeScript 本质上是一种 JS linter。或者说，带有编译器可以理解的文档的 JS。
因此，与 CoffeeScript（添加语法糖）或 PureScript（看起来完全不像 JavaScript）等其他语言相比，您不需要学习很多东西就可以开始编写 TypeScript 代码。
TS中的类型是可选的，每个JS文件都是一个有效的TypeScript文件。虽然如果你的初始文件中有类型错误，编译器会抱怨，但它确实还给你一个能像以前那样工作的JavaScript文件。无论你在哪里，TypeScript都会在那里与你见面，而且很容易逐步建立起你的技能。
TypeScript 是在前端还是在后端使用？
TypeScript 已被编译为 JavaScript。因此，TS 可以在任何可以使用 JS 的地方使用：无论是前端还是后端。
JavaScript 是最流行的语言，用于实现应用程序和网页前端的脚本。因此，TypeScript可以用于同样的目的，但它在服务器端的复杂企业项目中大放异彩。
在Serokell，我们大部分的网页前端都是用TypeScript实现的。
什么是类型，它们在TS中是如何工作的？
关于类型的简要介绍
类型是在我们运行程序之前，通过在代码中描述我们计划如何使用我们的数据，来区分正确程序和不正确程序的一种方法。它们可以是简单的类型，如Number和String，也可以是为我们的问题领域完美建模的复杂结构。
编程语言可分为两类：静态类型或动态类型。
在静态类型的语言中，变量的类型必须在编译时就知道。如果我们声明一个变量，编译器应该知道（或推断出）它是一个数字、一个字符串还是一个布尔值。想想Java。
在具有动态类型的语言中，情况并不一定如此。变量的类型只有在运行程序时才能知道。想想Python。
TypeScript可以支持静态类型，而JavaScript不支持。
由于TypeScript的静态类型化，你需要更努力地去尝试。
- 引入未定义的变量（编译时警告有帮助）
- 将两个有数字的字符串相加（如 "4"+"20"="420"）。
- 对不允许操作的东西进行操作，如修剪数字。
通过静态类型系统，你可以创建你自己的复合类型。这使得工程师能够更详细地表达他们的意图。
明确的类型也使你的代码能够自我记录：它们确保你的变量和函数与意图相符，并使计算机能够照顾到记住周围的环境。
TypeScript 的类型
TypeScript 有各种基本类型，如布尔、数字、字符串、阵列、元组等。其中有些类型在JS中并不存在；你可以在TypeScript的文档中了解更多信息。
除了这些，这里还有一些我们想介绍的其他类型，以展示TS的表现力。
任意和未知
Any作为一种类型可以涵盖，嗯，任何你想要的东西，而未知是其类型安全的对应物。
每当你想摆脱类型系统时，any可以让你把任何JavaScript变量分配给它。它经常被用来模拟那些尚未被检查的、类型未知的传入变量（例如来自第三方API）。
Unknown和any很像，但它不会让你在变量被明确的类型检查之前对它进行任何操作。
虚数
Void用于没有返回值的情况，例如，作为没有返回值的函数的返回类型。
永不
Never是永远不应该发生的事情的返回类型，比如一个会抛出一个异常的函数。
交叉和联合类型
这些类型使你能够创建自定义类型以更好地适应你的逻辑。
交叉类型使你能够把几个基本类型放在一个类型中。例如，你可以创建一个自定义的Person类型，它有一个name: string 和一个phone_number: number 。这相当于说。我希望我的类型是这个和那个。
联合类型使你的类型能够采取多种基本类型中的一种。例如，你可以有一个返回result: string 或undefined 的查询。这相当于说。我希望我的类型是这个或那个。
如果你把类型想成是空间，所有这些类型很快就有意义了。
TypeScript中的类型可以是隐式和显式的。如果你不明确地写你的类型，编译器将使用类型推理来推断你所使用的类型。
然而，明确地写它们，会带来一些好处，如帮助其他开发人员阅读你的代码，并确保你所看到的就是编译器所看到的。
TypeScript vs. JavaScript
实事求是是有好处的。看一下这个图表。
2020年第一季度，TypeScript在GitHub拉取请求中排名第七，高于PHP和C。
虽然这其中有一个相当大的原因是微软（创造了它）和谷歌等公司对TypeScript的支持，但它被支持是有原因的。
你应该选择TypeScript而不是JavaScript的3个原因
1.TypeScript更可靠
与JavaScript相比，TypeScript代码更可靠，更容易重构。这使开发人员能够规避错误，并更容易进行重写。
类型使大多数可能潜入JavaScript代码库的愚蠢错误无效，并在编写新代码和重构时创建一个快速反馈回路，以修复所有小错误。
2.TypeScript更加明确
将类型显性化使我们的注意力集中在我们的系统到底是如何构建的，以及它的不同部分如何相互作用。在大规模系统中，重要的是能够抽象出系统的其他部分，同时牢记上下文。类型使我们能够做到这一点。
3.TypeScript和JavaScript实际上是可以互换的，那么为什么不呢？
因为JavaScript是TypeScript的一个子集，你可以在TypeScript代码中使用所有你想要的JavaScript库和代码。
大多数流行的JavaScript库在2020年都有类型--Definitely Typed是一个存储库，里面有很多不同的JavaScript库的类型，你可以用它来使你与它们的交互更加类型安全。
这意味着你可以在你的JavaScript代码库中逐渐采用TypeScript，首先将类型添加到单个模块，然后扩展到......消费已知的宇宙，我猜。
TypeScript的缺点
你不可能把一个JavaScript团队或一个JavaScript库立即转换为习惯性的TypeScript。你必须做出权衡，并在前期做出时间上的牺牲。
虽然我们可以争论从长远来看，明确的类型给你带来的节省，但从短期来看，添加它们确实需要更多的时间。这可以说不是什么大问题，但它是支持JavaScript的一个论据。
因此，对于小型项目和自己使用的原型，你可能不会选择TypeScript。
测试与类型
简单地触及一下关于测试与类型的讨论：这两件事都能捕捉到不同类别的bug，所以以不偏不倚的方式做这两件事是有意义的。
你仍然可以同时使用单元测试和更高级的技术，如基于属性的测试与TS，同时保持静态类型系统的好处。
总结一下，下面是两种语言的快速比较。
| TypeScript | JavaScript |
|---|---|
| TS是一种面向对象的脚本语言 | JS是一种面向对象的脚本语言 |
| 依赖性语言（可编译为JavaScript）。 | 独立语言（可以被解释和执行） |
| 编译语言，不能直接在浏览器中执行 | 解释的语言，直接在网络浏览器中执行 |
| 可以是静态类型的 | 动态类型化 |
| 更好的结构化和简洁性 | 更加灵活，因为你不受类型系统的限制 |
| 有一个.ts的扩展名 | 有一个.js的扩展名 |
| 由Anders Hejlsberg（C#的设计者）在微软创建，由微软维护 | 由Brendan Eich（Netscape）创建，由ECMA（欧洲计算机制造商协会）维护。 |
| 对复杂项目来说是一个公平的选择 | 适合于小型、简单项目的工作 |
TypeScript快速入门指南
TypeScript 编译器
要编译您的 TS 代码，您需要安装tsc （TypeScript 编译器的简称）。最简单的方法是通过终端。这可以通过npm ，使用以下命令轻松完成。
npm install -g typescript
如果你想在Visual Studio Code中使用TypeScript，在他们的网站上有一个方便的指南。
一旦你安装了tsc ，你可以用tsc filename.ts 来编译你的文件。
将你的文件从JavaScript迁移到TypeScript
比方说，由于奇怪的行为，我们想把下面这个JavaScript文件改成TypeScript。
function my_sum(a, b) {
return a + b;
}
let a = 4;
let b = "5";
my_sum(a, b);
好消息。任何JS文件在技术上都是有效的TypeScript文件，所以你有了一个很好的开始--只要把文件扩展名从.js切换到.ts。
TypeScript有类型推断功能，这意味着它可以自动推断你使用的一些类型 ，而不需要你添加它们。在这种情况下，它假定函数对两个任意类型的变量求和，这是真的，但现在没有什么大用。
如果我们只想对数字求和，我们可以给my_sum 添加一个类型签名，使其只接受数字。
function my_sum(a: number, b: number) {
return a + b;
}
let a = 4;
let b = "5";
my_sum(a, b);
现在，TypeScript给我们提供了一个错误。
Argument of type 'string' is not assignable to parameter of type 'number'.
好在我们找到了错误所在。 :)为了进一步摆脱这样的错误，你也可以为变量添加类型定义。
let b: number = "5" // Type '"5"' is not assignable to type 'number'.
let b: number = 5 // Everything ok.
TypeScript在它能做什么以及如何帮助你方面相当灵活。关于如何将你现有的JavaScript代码库转移到TypeScript或使用TypeScript来改进你的JS代码的一个不太琐碎的例子，请阅读本指南。
如何在浏览器中使用 TypeScript？
要在浏览器中运行 TypeScript，需要用 TypeScript 编译器（tsc）将其转译为 JavaScript。在这种情况下，tsc ，根据.ts代码创建一个新的.js文件，你可以用任何方式使用JavaScript文件。
结论
总的来说，TypeScript是一个很好的工具，即使你没有充分使用它，也可以在你的工具箱中使用。它很容易从小事做起，慢慢成长，一边学习一边添加新功能。TypeScript很务实，对初学者很欢迎，所以不需要害怕。
