- 原文地址: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 上发现更多有趣的文章。
也可以关注我的 twitter。❤
感谢阅读!
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。