关于typescript:TypeScript-类型系统

TypeScript 的学习材料十分多，其中也不乏很多优良的文章和教程。然而目前为止没有一个我特地称心的。起因有：

• 它们大多数没有一个清晰的主线，而是依照 API 组织章节的，内容在 逻辑上 比拟零散。
• 大多是“讲是什么，怎么用“，而不是”讲为什么，讲原理“。
• 大多数内容比拟干燥，趣味性比拟低。都是水灵灵的文字，没有图片，不足可能引起强烈共鸣的例子。

因而我的想法是做一套不同市面上大多数的 TypeScript 学习教程。以人类认知的角度思考问题，学习 TypeScript，通过通俗易懂的例子和图片来帮忙大家建设 TypeScript 世界观。而本篇文章则是这个系列的开篇。

系列安顿：

• 上帝视角看 TypeScript（已公布）
• TypeScript 类型零碎（就是本文）
• types 和 @types 是什么？
• 你不晓得的 TypeScript 泛型（万字长文，倡议珍藏）（已公布）
• TypeScript 配置文件该怎么写？
• TypeScript 是如何与 React，Vue，Webpack 集成的？
• TypeScript 练习题

目录未来可能会有所调整。

留神，我的系列文章根本不会讲 API，因而须要你有肯定的 TypeScript 应用根底，举荐两个学习材料。

• 深刻了解 TypeScript
• 官网文档

联合这两个材料和我的系列教程，把握 TypeScript 不可企及。

接下来，咱们通过几个方面来从宏观的角度来看一下 TypeScript。

<!– more –>

前言

上一节的上帝视角看 TypeScript，咱们从宏观的角度来对 Typescript 进行了一个瞻望。之所以把那个放到结尾讲是让大家有一个大体的意识，不想让大家一叶障目。当你对整个宏观层面有了肯定的理解，那么对 Typescript 的了解就不会错太多。相同，一开始就是具体的概念和 API，则很可能会让你丢失都整体的根本判断。

实际上，Typescript 始终在不断更新迭代。一方面是因为当初许下的诺言”Typescript 是 JavaScript 的超集“（JavaScript 的个性你要同步反对，同时也要解决各种新语法带来的不兼容状况）。不单是 ECMA，社区的其余倒退可能也会让 Typescript 很好受。比方 JSX 的宽泛应用就给 Typescript 泛型的应用带来了影响。

TypeScript 始终处于高速的迭代。除了修复日常的 bug 之外，TypeScript 也在一直公布新的性能，比方最新 4.0.0 beta 版本的 标签元祖 的性能就对智能提醒这块很有用。Typescript 在社区倒退方面也做的分外好，以至于它的竞争对手 Flow 被 Typescript 完满击败，这在很大水平上就是因为 Typescript 没有烂尾。现在微软在开源方向的发力是越来越显著了，我很期待微软接下来的体现，让咱们刮目相待。

变量类型和值类型

有的同学可能有疑难，JavaScript 不是也有类型么？它和 Typescript 的类型是一回事么？JavaScript 不是动静语言么，那么通过 Typescript 的限定会不会丢失动静语言的动态性呢？咱们持续往下看。

• JavaScript 中的类型其实是值的类型。实际上不仅仅是 JavaScript，任何动静类型语言都是如此，这也是动静类型语言的实质。
• Typescript 中的类型其实是变量的类型。实际上不仅仅是 Typescript，任何动态类型语言都是如此，这也是动态类型语言的实质。

记住这两句话，咱们接下来解释一下这两句话。

对于 JavaScript 来说，一个变量能够是任意类型。

var a = 1;
a = "lucifer";
a = {};
a = [];

下面的值是有类型的。比方 1 是 number 类型，”lucifer” 是字符串类型，{} 是对象类型，[] 是数组类型。而变量 a 是没有固定类型的。

对于 Typescript 来说，一个变量只能承受和它类型兼容的类型的值。说起来比拟拗口，看个例子就明确了。

var a: number = 1;
a = "lucifer"; // error
var b: any = 1;
a = "lucifer"; // ok
a = {}; // ok
a = []; // ok

咱们不能将 string 类型的值赋值给变量 a，因为 string 和 number 类型不兼容。而咱们能够将 string,Object,Array 类型的值赋值给 b，因而 它们和 any 类型兼容。简略来说就是，一旦一个变量被标注了某种类型，那么其就只能承受这个类型以及它的子类型。

类型空间和值空间

类型和值寓居在不同的空间，一个在阴间一个在阳间。他们之间相互不能拜访，甚至不晓得彼此的存在。类型不能当做值来用，反之亦然。

类型空间

如下代码会报类型找不到的错：

const aa: User = {name: "lucifer", age: 17};

这个比拟好了解，咱们只须要应用 interface 申明一下 User 就行。

interface User {
  name: string;
  age: number;
}

const aa: User = {name: "lucifer", age: 17};

也就是说应用 interface 能够在类型空间申明一个类型，这个是 Typescript 的类型查看的根底之一。

实际上类型空间外部也会有子空间。咱们能够用 namespace（老）和 module（新）来创立新的子空间。子空间之间不能间接接触，须要依赖导入导出来交互。

值空间

比方，我用 Typescript 写出如下的代码：

const a = window.lucifer();

Typescript 会报告一个相似Property 'lucifer' does not exist on type 'Window & typeof globalThis'. 的谬误。

实际上，这种谬误并不是类型谬误，而是找不到成员变量的谬误。咱们能够这样解决：

declare var lucifer: () => any;

也就是说应用 declare 能够在值空间申明一个变量。这个是 Typescript 的变量查看的根底，不是本文要讲的次要内容，大家晓得就行。

明确了 JavaScript 和 TypeScript 类型的区别和分割之后，咱们就能够来进入咱们本文的主题了：类型零碎。

类型零碎是 TypeScript 最次要的性能

TypeScript 官网形容中有一句：TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications。实际上这也正是 Typescript 的次要性能，即给 JavaScript 增加动态类型查看。要想实现动态类型查看，首先就要有类型零碎。总之，咱们应用 Typescript 的次要目标依然是要它的动态类型查看，帮忙咱们提供代码的扩展性和可维护性。因而 Typescript 须要保护一套残缺的类型零碎。

类型零碎包含 1. 类型 和 2. 对类型的应用和操作，咱们先来看类型。

类型

TypeScript 反对 JavaScript 中所有的类型，并且还反对一些 JavaScript 中没有的类型（毕竟是超集嘛）。没有的类型能够间接提供，也能够提供自定义能力让用户来本人发明。那为什么要减少 JavaScript 中没有的类型呢？我举个例子，比方如下给一个变量申明类型为 Object，Array 的代码。

const a: Object = {};
const b: Array = [];

其中：

• 第一行代码 Typescript 容许，然而太宽泛了，咱们很难失去有用的信息，举荐的做法是应用 interface 来形容，这个前面会讲到。
• 第二行 Typescript 则会间接报错，起因的实质也是太宽泛，咱们须要应用泛型来进一步束缚。

对类型的应用和操作

下面说了 类型和值寓居在不同的空间，一个在阴间一个在阳间。他们之间相互不能拜访，甚至不晓得彼此的存在。

应用 declare 和 interface or type 就是别离在两个空间编程。比方 Typescript 的泛型就是在类型空间编程，叫做类型编程。除了泛型，还有汇合运算，一些操作符比方 keyof 等。值的编程在 Typescript 中更多的体现是在相似 lib.d.ts 这样的库。当然 lib.d.ts 也会在类型空间定义各种内置类型。咱们没有必要去死扣这个，只须要理解即可。

lib.d.ts 的内容次要是一些变量申明（如：window、document、math）和一些相似的接口申明（如：Window、Document、Math）。寻找代码类型（如：Math.floor）的最简略形式是应用 IDE 的 F12（跳转到定义）。

类型是如何做到动态类型查看的？

TypeScript 要想解决 JavaScript 动静语言类型太宽松的问题，就须要：

1. 提供给 变量 设定类型的能力

留神是变量，不是值。

1. 提供罕用类型（不必须，然而没有用户体验会极差）并能够扩大出自定义类型（必须）。
2. 依据第一步给变量设定的类型进行类型查看，即不容许类型不兼容的赋值，不容许应用值空间和类型空间不存在的变量和类型等。

第一个点是通过类型注解的语法来实现。即相似这样：

const a: number = 1;

Typescript 的类型注解是这样，Java 的类型注解是另一个样子，Java 相似 int a = 1。这个只是语法差别而已，作用是一样的。

第二个问题，Typescript 提供了诸如 lib.d.ts 等类型库文件。随着 ES 的不断更新，JavaScript 类型和全局变量会逐步变多。Typescript 也是采纳这种 lib 的形式来解决的。

（TypeScript 提供的局部 lib）

第三个问题，Typescript 次要是通过 interface，type，函数类型等买通 类型空间 ，通过 declare 等买通 值空间，并联合 binder 来进行类型诊断。对于 checker，binder 是如何运作的，能够参考我第一篇的介绍。

接下来，咱们介绍类型零碎的性能，即它能为咱们带来什么。如果下面的内容你曾经懂了，那么接下来的内容会让你感到”你也不过如此嘛“。

类型零碎的次要性能

1. 定义类型以及其上的属性和办法。

比方定义 String 类型，以及其原型上的办法和属性。

length，includes 以及 toString 是 String 的 成员变量，生存在值空间，值空间尽管不能间接和类型空间接触，然而类型空间能够作用在值空间，从而给其增加类型（如上图黄色局部）。

1. 提供自定义类型的能力

interface User {
  name: string;
  age: number;
  say(name: string): string;
}

这个是我自定义的类型 User，这是 Typescript 必须提供的能力。

1. 类型兼容体系。

这个次要是用来判断类型是否正确的，下面我曾经提过了，这里就不赘述了。

1. 类型推导

有时候你不须要显式阐明类型（类型注解），Typescript 也能晓得他的类型，这就是类型推导后果。

const a = 1;

如上代码，编译器会主动推导出 a 的类型 为 number。还能够有连锁推导，泛型的入参（泛型的入参是类型）推导等。类型推导还有一个特地有用的中央，就是用到类型收敛。

接下来咱们具体理解下类型推导和类型收敛。

类型推导和类型收敛

let a = 1;

如上代码。Typescript 会推导出 a 的类型为 number。

如果只会你这么写就会报错：

a = "1";

因而 string 类型的值不能赋值给 number 类型的变量。咱们能够应用 Typescript 内置的 typeof 关键字来证实一下。

let a = 1;
type A = typeof a;

此时 A 的类型就是 number，证实了变量 a 的类型的确被隐式推导成了 number 类型。

有意思的是如果 a 应用 const 申明，那么 a 不会被推导为 number，而是推导为类型 1。即 值只能为 1 的类型，这就是类型收敛。

const a = 1;
type A = typeof a;

通过 const，咱们将 number 类型膨胀到了 值只能为 1 的类型。

理论状况的类型推导和类型收敛要远比这个简单，然而做的事件都是统一的。

比方这个：

function test(a: number, b: number) {return a + b;}
type A = ReturnType<typeof test>;

A 就是 number 类型。也就是 Typescript 晓得两个 number 相加后果也是一个 number。因而即便你不显示地注明返回值是 number，Typescript 也能猜到。这也是为什么 JavaScript 我的项目不接入 Typescript 也能够取得类型提醒的起因之一。

除了 const 能够膨胀类型，typeof，instanceof 都也能够。起因很简略，就是Typescript 在这个时候能够 100% 确定你的类型了。我来解释一下：

比方下面的 const，因为你是用 const 申明的，因而 100% 不会变，肯定永远是 1，因而类型能够膨胀为 1。再比方：

let a: number | string = 1;
a = "1";
if (typeof a === "string") {a.includes;}

if 语句内 a 100% 是 string，不能是 number。因而 if 语句内类型会被膨胀为 string。instanceof 也是相似，原理截然不同。大家只有记住 Typescript 如果能够 100% 确定你的类型，并且这个类型要比你定义的或者 Typescript 主动推导的范畴更小，那么就会产生类型膨胀 就行了。

总结

本文次要讲了 Typescript 的类型零碎。Typescript 和 JavaScript 的类型是很不一样的。从外表上来看，TypeScript 的类型是 JavaScript 类型的超集。然而从更深层次上来说，两者的实质是不一样的，一个是值的类型，一个是变量的类型。

Typescript 空间分为值空间和类型空间。两个空间不互通，因而值不能当成类型，类型不能当成值，并且值和类型不能做运算等。不过 TypeScript 能够将两者联合起来用，这个能力只有 TypeScript 有，作为 TypeScript 的开发者的你没有这个能力，这个我在第一节也简略介绍了。

TypeScript 既会对变量存在与否进行查看，也会对变量类型进行兼容查看。因而 TypeScript 就须要定义一系列的类型，以及类型之间的兼容关系。默认状况，TypeScript 是没有任何类型和变量的，因而你应用 String 等都会报错。TypeScript 应用库文件来解决这个问题，最经典的就是 lib.d.ts。

TypeScript 曾经做到了足够智能了，以至于你不须要写类型，它也能猜出来，这就是类型推导和类型膨胀。当然 TypeScript 也有一些性能，咱们感觉应该有，并且也是能够做到的性能空缺。然而我置信随着 TypeScript 的逐渐迭代（截止本文公布，TypeScript 刚刚公布了 4.0.0 的 beta 版本），肯定会越来越欠缺，用着越来越难受的。

咱们每个我的项目的须要是不一样的，简略的根本类型必定无奈满足多样的我的项目需要，因而咱们必须反对自定义类型，比方 interface，type 以及简单一点的泛型。当然泛型很大水平上是为了缩小样板代码而生的，和 interface，type 这种刚需不太一样。

有了各种各样的类型以及类型上的成员变量，以及成员变量的类型，再就加上类型的兼容关系，咱们就能够做类型查看了，这就是 TypeScript 类型查看的根底。TypeScript 外部须要保护这样的一个关系，并对变量进行类型绑定，从而给开发者提供 类型剖析 服务。

关注我

大家也能够关注我的公众号《脑洞前端》获取更多更陈腐的前端硬核文章，带你意识你不晓得的前端。

公众号【力扣加加】
知乎专栏【Lucifer – 知乎】

点关注，不迷路！