[译] TypeScript：拥有超能力的 JavaScript (上)

• 原文地址：TypeScript — JavaScript with superpowers
• 原文做者：Indrek Lasn
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：jonjia
• 校对者：moods445 goldEli

TypeScript：拥有超能力的 JavaScript (上)

JavasSript 很酷。但你知道什么更酷一点吗？TypeScript。

你能看出这段代码有什么问题吗？

TypeScript (上) 对比 ES6 (下)

TypeScript 能够看出来。看到那个红色的下划线了吗？这就是 TypeScript 给咱们的错误提示。

你可能已经发现了这个问题（干的漂亮） — toUpperCase() 是 String 的方法，咱们将一个整型做为参数传递过去，显然不能在整型上调用 toUpperCase() 方法。

咱们经过声明 nameToUpperCase() 方法的参数只能为 string 类型来修复这个问题。

棒棒哒！如今咱们不用本身去记 nameToUpperCase() 的参数类型必须为 string，咱们能够信任 TypeScript 去记住它。想象下，若是有成千上万个参数类型须要咱们记住。太疯狂了吧！

仍是有错误警告。为何？由于咱们仍是传递了个整型参数！传递个 string 类型的参数就行了。

注意 TypeScript 最终仍是会被编译成 JavaScript (它只是 JavaScript 的一个超集，就像 C++ 和 C 的关系同样)。

以上就是 TypeScript 和类型检查强大的缘由。

TypeScript 上个月（译注：2018年1月）有 10,327,953 的下载量。

TypeScript vs Flow 下载量对比

让咱们开始探索 TypeScript 的世界 — 在深刻探究以前，先来了解下 TypeScript 到底是什么以及为何存在。

TypeScript 于 2012 年 10 月 1 日正式开源。 由 Microsoft 开发维护，C# 的首席架构师 Anders Hejlsberg 带领他的团队参与了 TypeScript 的开发。

TypeScript 在 GitHub 上彻底开源，因此任何人均可以阅读它的 源码 并作出贡献。

TypeScript — JavaScript 的超集。

如何开始

实际上很是简单 — 咱们只须要安装一个 NPM 包。打开你的终端，输入如下命令：

npm i -g typescript && mkdir typescript && cd typescript && tsc --init
复制代码

再设置下 TypeScript 的配置文件就能够了。

咱们只须要建立一个 .ts 文件，并告诉 TypeScript 编译器监视文件变化。

touch typescript.ts && tsc -w
复制代码

tsc — TypeScript 编译器。

最后一步

太好了 — 如今你能够跟着咱们的示例一块儿练习。

咱们在 .ts 文件中编写代码，编译后生成的 .js 文件是在浏览器中运行的代码。在这个例子中，咱们不是用浏览器环境，咱们使用 NodeJS 环境（因此 .js 是在 Node 环境中运行的）。

JavaScript 有 7 种数据类型，其中 6 种是基础类型，剩下的被定义为 Object 类型。

JavaScript 基础类型以下：

• String
• Number
• Undefined
• Null
• Symbol
• Boolean

剩下的都是 objects

• 函数是头等对象
• 数组是特殊的对象
• 原型是对象

TypeScript 支持与 JavaScript 相同的基础类型，此外还提供了一些额外的类型。

额外的类型是可选的，若是你不熟悉那些类型，你就能够不用。我发现使用 TypeScript 的好处就是：使用起来灵活方便。

额外的类型以下：

元组（tuple）就是组织好结构的数组，只是按照顺序定义好数组元素的类型

普通数组 vs 元组（组织好结构的数组）

若是你不遵照元组定义好的规则，TypeScript 会给咱们发出错误警告。

元组定义了第一个元素是 number 类型，但赋值时并非 number 类型，而是一个值为 "Indrek" 的 string 类型，因此编译结果会报错。

---

在 TypeScript 中，你须要定义函数返回值的类型。由于有不少没有 return 语句的函数。

看一下咱们是怎么声明参数和返回值类型的 — 它们的类型都是 string。

若是咱们没有返回任何值会怎么样？下面例子的函数体中只有一条 console.log 语句。

咱们能够看到，编译结果提示咱们：“嘿，你明确表示咱们必须返回一个 string 类型，但你实际上没返回任何值。我就是告诉你，你没有遵照咱们的规则。”

若是咱们就是不想返回任何值该怎么办呢？好比咱们的函数中有一个回调函数。在这种状况下就能够声明返回值的类型为Void。

但有时候咱们的函数确实有返回值，不论是隐式仍是显式地，咱们都不能将返回值的类型设置为 Void。

---

any 类型很是简单，若是咱们要为还不清楚类型的变量指定一个类型的话，就能够指定为 any

好比下面的例子：

能够看到我给 person 变量屡次赋值，每次使用的值的类型都不一样。第一次是 string 类型，而后是 number，最后是 boolean。咱们没法肯定这个变量的类型。

若是你使用第三方的库，你可能会不知道某些变量的类型。

让咱们声明一个数组，你把从某个 API 获取到的数据存储到这个数组中。数组中的数据是随机的。它不会只包括 string、number，也不像元组那样有组织好的结构。any 类型就能够解决这个问题。

若是你知道数组的元素都是同一种类型，你可使用下面的语法声明：

这篇文章的篇幅已经够长了，咱们将在下一篇文章继续。咱们还剩下 — enum — never — null — undefined 这些基础类型和类型断言须要讨论。

下篇文章在此

若是你想深刻学习，能够阅读 TypeScript 的 官方文档

因为好多人问我这篇文章中的图片使用的什么编辑器。我使用 Visual Studio Code 编辑器，配合 Ayu Mirage 主题和 Source Code Pro 字体。

你能够在个人 Medium 上发现更多有趣的文章。

• Indrek Lasn - Medium: Read writing from Indrek Lasn on Medium. Merchant of happiness, founder @ https://vaulty.io, growth/engineering @… medium.com

也能够关注个人 twitter。❤

• Indrek Lasn (@lasnindrek) | Twitter: The latest Tweets from Indrek Lasn (@lasnindrek). business propositons: lasnindrek@gmail.com. Zurich, Switzerland twitter.com

感谢阅读！

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。