【译】TypeScript 的类型（一）

￡神魔★判官ぃ 2022-01-19 20:59 188阅读 0赞

>  *  原文地址：[TypeScript — JavaScript with superpowers][TypeScript _ JavaScript with superpowers]
>  *  原文作者：[Indrek Lasn][]
>  *  译者：[liaozeen][]

JavaScript 很酷。但是你知道比JavaScript更酷的是什么吗？

是Typescript。

你能说出下面代码哪里出错了吗？

TypeScript (左) and ES6 (右)

看到红色下划线了吗？这是Typescript给我们的错误提示。

你可能找到这个错误了—— `toUpperCase()` 是 字符串类型的方法。我们把一个整数作为参数传入，不过整数不能调用 `toUpperCase()` 。

我们来修改它，限制 `nameToUpperCase()` 的参数为字符串类型。

现在我们不必记住 `nameToUpperCase()` 只能接受一个字符串作为参数，让Typescript帮我们来记住它。想象下，如果要记住成千上万个方法以及其参数的类型，那会疯掉的。

但是还是出现红色提示。这是为什么？因为我们传的还是一个数字！我们现在来传个字符串。

注意到Typescript会编译成JavaScript（它只是JavaScript的超集，像C++和C）

Typescript的静态类型检查简单而强大。

在上个月，TypeScript已经下载了**10,327,953**次。

Typescript与Flow的下载量比较

让我们来探索Typescript世界——我们稍后会深入探讨，首先明白Typescript是什么以及为什么存在。

[TypeScript于2012年10月1日首次亮相。][TypeScript_2012_10_1] 它起源于微软，由 [Anders Hejlsber][]（领导设计C\#）和他的团队开发。

Typescript完全公开在Github上，所以任何人都可以阅读源代码和贡献。

Typescript——JavaScript的超集

## 怎么开始 ##

很简单，我们需要的是NPM包。打开你的终端，然后跟着以下输入：

我们应该做好Typescript的配置。

{
        "compilerOptions": {
            "target": "es5",
            "module": "commonjs"
        }
    }
    复制代码

我们需要做的是创建`.ts` 文件，并告诉Typescript监测代码的变化，并进行编译。

执行以下命令进行代码监测：

tsc -w
    复制代码

**tsc**—Typescript的编译指令

这就是我们最终生成的文件

现在你可以按照我们的例子来完成！

我们在`.ts`文件里写代码，`.js`文件是给浏览器读取的。在本文的例子中，我们没有用浏览器，而是使用Node.js（Node也能读`.js`）

JavaScript有七种数据类型，其中六种是基础类型，剩下的一种是对象类型。

**JavaScript 的基础类型有：**

*  *String*
 *  *Number*
 *  *Undefined*
 *  *Null*
 *  *Symbol*
 *  *Bollean*

剩下的是对象类型

*  [函数是第一类对象][Link 1]
 *  [数组是特殊的对象][Link 2]
 *  [对象的原型][Link 3]

Typescript除了和JavaScript一样有基础类型，也扩充了额外的类型。

这些额外的类型是可选的，如果你不熟悉，你不一定要使用。

**额外的类型如下：**

### Tuple ###

可以把 tuple 想象为有结构的数组。你按顺序预先定义数组元素的类型。

如果我们不按 tuple 的相应位置的类型分配相应的类型，Typescript会提示我们规则错误。

### void ###

`tuple` 期望第一个变量是 `number` 类型—在这里例子中，它不是数字类型，而是字符串 `"Indrek"` ，所以会提示我们错误。

在typescript里，你必须在函数里定义返回类型。像这样：有些函数没有 return语句

注意我们如何声明参数类型和返回类型 - 两者都是字符串。

现在看看如果我们不返回任何东西会发生什么？

可以看到Typescript编译程序告诉我们："你定义了返回类型为字符串，但现在却没有返回任何东西。现在告诉你，我们没有遵守提示的规则。"

如果我们不知道需要返回什么时怎么办？这种情况我们可以使用 `Void` 定义返回类型。

但是在这个例子里，如果我们要返回一个值，我们就不能定义返回类型为 `void`。

### Any ###

`any` 类型非常简单。如果我们不知道是什么类型时可以使用 `any`。

注意到我们多次给 `person` 重新分配不同类型的值。第一次是字符串，然后是数字，最后是布尔值。我们不确定其类型。

现实世界的例子是，如果你使用第三方库而你不知道类型。

我们来创建一个数组，把一些数据存储在数组里。数组是由不同类型的数据组成，不仅仅是字符串，或数字，又或者有结构的类型，像 `tuple` 。`any`类型就会起作用。

如果你的数组里只是一种类型，你可以明确告诉编译器，像这样：

如果你想了解更多，这里有文档介绍。

中文文档：[www.tslang.cn/docs/handbo…][www.tslang.cn_docs_handbo]

英文文档：[www.typescriptlang.org/docs/handbo…][www.typescriptlang.org_docs_handbo]

[TypeScript _ JavaScript with superpowers]: https://link.juejin.im?target=https%3A%2F%2Fwww.strilliant.com%2F2018%2F02%2F28%2Ftypescript-%25E2%2580%2594-javascript-with-superpowers-%25E2%2580%2593-freecodecamp-org%2F
[Indrek Lasn]: https://link.juejin.im?target=https%3A%2F%2Fmedium.freecodecamp.org%2F%40wesharehoodies
[liaozeen]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fliaozeen
[TypeScript_2012_10_1]: https://link.juejin.im?target=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FTypeScript
[Anders Hejlsber]: https://link.juejin.im?target=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FAnders_Hejlsberg
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFunction_object%23In_JavaScript
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fstackoverflow.com%2Fa%2F5048482%2F5073961
[Link 3]: https://link.juejin.im?target=http%3A%2F%2Fraganwald.com%2F2015%2F06%2F10%2Fmixins.html
[www.tslang.cn_docs_handbo]: https://link.juejin.im?target=https%3A%2F%2Fwww.tslang.cn%2Fdocs%2Fhandbook%2Fbasic-types.html
[www.typescriptlang.org_docs_handbo]: https://link.juejin.im?target=https%3A%2F%2Fwww.typescriptlang.org%2Fdocs%2Fhandbook%2Fbasic-types.html