这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~

保持一致就意味着要对我们编写的代码增加一定的约束，ESLint 就是这么一个通过各种规则对我们的代码添加约束的工具。所以，同开发前端项目一样，熟练掌握 ESLint 规则，也成了 TypeScript 项目开发的必要条件。库是 ESLint 的 TypeScript 解析器，用来检查和规范 TypeScript 代码。是对象类型，每个团队都有自己的一套标准规范，按照要求在此配置对应的 ESLint 检测规则即可。ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。

文件中的各配置项及其使用场景，尤其要熟悉一些常用的编译选项，一份良好的配置项文件也是一个团队规范的标准之一。也是一个数组列表，写入排除某些文件路径，这些文件排除于待编译列表，支持。注意，自动引入只在你使用了全局的声明（相反于模块）时是重要的。文件，那么它意味着这个目录是 TypeScript 项目的根目录，：对象类型，用来设置编译选项，若不设置则默认使用上节介绍的默认配置。是一个数组列表，写入待编译文件的相对或绝对路径，不支持。是一个数组列表，写入待编译文件的路径，支持。，只有被列出来的包才会被包含进来。

本小节梳理了 TypeScript 的众多编译选项，可以先通读一遍，大致了解有些什么功能，在项目中需要使用时再来查阅即可。当命令行上指定了输入文件时，tsconfig.json 文件会被忽略。TypeScript 提供了很多不同功能的编译选项，既可以通过配置。使编译器在监视模式下运行，会监视输出文件，在它们改变时重新编译。命令后跟随参数这形式，直接编译。属性来实现编译，也可以使用在。为例，在当前目录创建。

但这并不是说 TypeScript 会随意的合并两个名称相同的字符串变量，这显然是不符合语法规定的，那么本节将介绍什么样的声明可以进行合并。虽然 TypeScript 有声明合并的功能，但是在工作中应尽量避免定义命名相同的声明，合理使用模块来规避这类情况。只要命名空间的定义符合将要合并类型的定义，命名空间就可以与其它类型的声明进行合并，合并结果包含两者的声明类型。命名空间要放在类的定义后面，命名空间内导出的成员，相当于合并后类的静态属性。枚举本身也是个对象，与命名空间对象合并后对象的属性进行了扩充。

在没有使用模块化编程的时代，会经常遇到全局变量污染、变量重名、多个文件之间存在依赖关系，需要保证一定加载顺序等问题。本节将介绍 TypeScript 的模块化方案，学习模块的导入导出机制，要注意 TypeScript 是怎么样兼容 CommonJS 和 AMD 规范的。可以看到 TypeScript 的模块机制基本采用的是 ES6 的内置模块化机制，另外添加了。导出一个模块，则必须使用 TypeScript 的特定语法。相反的，如果一个文件不带有顶级的。变量，这个变量包含了一个模块的所有导出内容。

稍后我们使用它们来创建一个新类，同时具有这两种功能。

Reflect，翻译为『反射』，Metadata，翻译为『元数据』。反射这个概念在 Java 等众多语言中已经广泛运用，Reflect Metadata 就是通过装饰器来给类添加一些自定义的信息，然后通过反射将这些信息提取出来，也可以通过反射来添加这些信息。通过这种方式给对象添加额外的信息，是不会影响对象的结构的。注意, 实例方法与静态方法取元数据是不同的，实例方法需要在类的实例上取元数据，静态方法直接在类上取元数据。，再通过反射拿到这个路由信息，将这些路由信息进行一定的封装，然后绑定在。

当我们需要在多个不同的类之间共享或者扩展一些方法或行为的时候，代码会变得错综复杂，极其不优雅，这也是装饰器被提出的一个很重要的原因。以上两种写法，其实本质是相同的，类装饰器函数表达式将构造函数作为唯一的参数，主要用于扩展类的属性和方法。参数装饰器表达式会在运行时当作函数被调用，以使用参数装饰器为类的原型上附加一些元数据，传入下列3个参数。装饰器工厂就是一个简单的函数，它返回一个表达式，以供装饰器在运行时调用。常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。

来创建一个生成器函数，在调用一个生成器函数后，并不会立即执行函数中的代码，而是会返回一个迭代器对象，通过调用迭代器对象的。相反，生成器函数可以中途停止，然后从停止的地方继续执行的。语法创建了一个生成器函数，调用这个函数并赋值给变量。这里注意下，生成器最初没有产生任何结果，在第一次调用。生成器函数会返回一个对象，可以调用这个对象上的。方法，这次函数内没有返回值，也就是默认返回。会将后面的值返回，生成器生成一个对象。方法，函数内继续执行，打印出。，函数停止运行，直到再次调用。，函数停止运行，直到再次调用。

第 8 行，声明了一个可以返回迭代器对象的函数，这个函数的返回值类型必须符合 Iterator 接口。包括 Array，Map，Set，String，TypedArray，arguments 对象等等。上面的例子，用模拟的迭代器地迭代了一个数组对象，那是不是所有的对象都可以这样迭代呢？倒数第 4 行，通过调用迭代器对象上的 next() 方法，可以拿到数据集中的下一个数据项。第 1 行，声明了一个 Iterator 接口，具有 next 这样一个函数类型。对象数组，将每一个对象解构，得到每一个对象的。

除了明确的 true 和 false 两个 boolean 类型外，JavaScript 可以在需要用到布尔类型值的上下文中使用强制类型转换将值转换为布尔值。Truthy 指的是转换后的值为’真‘的值，Falsy 是在 Boolean 上下文中已认定可转换为‘假‘的值。需要注意下，空函数、空数组、空对象这些都是 Truthy，返回 true。前三行的变量都是 truthy，为真，取反则得到 false。的操作，如果遇到要能明白其表达的意思。在 Vue.js 源码中有很多。

通过 ReturnType 可以得到函数 add() 的返回值类型为 number 类型。但要注意不要滥用这个工具类型，应尽量多的手动标注函数返回值类型。关键字来推断类型，可以实现一些比如联合类型转交叉类型、联合类型转元组的操作，有兴趣的可以了解一下。infer 相对比较难理解，我们先看下 TypeScript 一个内置工具类型。来声明了一个变量，那怎样声明一个不确定的类型变量呢？，TypeScript 推断出函数的返回值，并借助。关键字来声明一个待推断的类型变量。在条件类型表达式中，可以在。

第 7 行，可以看到 TypeScript 抛出了一个错误提示，一个 unknown 类型的对象不能进行 toUpperCase() 操作，可是在上一行明明已经通过。如果需要封装一个类型判断函数，你应该第一时间想到它，本节列出了一些常用的类型判断函数以供参考。关键字经常用来封装"类型判断函数"，通过和函数返回值的比较，从而缩小参数的类型范围，所以类型谓词 is 也是一种类型保护。关键字一般用于函数返回值类型中，判断参数是否属于某一类型，并根据结果返回对应的布尔类型。本节介绍 TypeScript 中的。

本节介绍 TypeScript 高级类型中的条件类型（conditional type），条件类型就是在初始状态并不直接确定具体类型，而是通过一定的类型运算得到最终的变量类型。学习到了本节，可以深刻的体会到 TypeScript 中的类型不单单只是简单的给变量进行标注，还可以通过各种运算，得到很多有趣的结果。倒数第二行，首先，遍历整个接口，然后通过条件类型判断接口的属性值的类型是否是函数类型，如果是函数类型，取其属性名。等都不是裸类型），简而言之裸类型就是未经过任何其他类型修饰或包装的类型。

比较简单，但是由此我们分析了几个 TypeScript 标准库中好用的工具类型。TypeScript 中工具类型有很多，感兴趣的同学可以深入了解一下。TypeScript 会将一些好用的工具类型纳入基准库中，方便开发者直接使用，本节介绍的映射类型就是这样的工具类型。对这种工具类型，我们不只要知道使用方法，还要了解其实现功能的本质。先来看这样一个任务：将 Person 接口的每个属性都变为可选属性或者只读属性。映射类型可以将已知类型的每个属性都变为可选的或者只读的。源码就使用了映射类型的语法。

age: 27参数names: K[]这种写法表示数组类型。

类型别名是最初 TypeScript 做类型约束的主要形式，后来引入接口之后，TypeScript 推荐我们尽可能的使用接口来规范我们的代码。类型别名会给类型起个新名字。类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。类型别名在定义交叉类型、联合类型时特别好用，要注意类型别名与接口的区别。给类型起个别名，类型别名较多应用于联合类型、交叉类型这种复合类型。类型别名不会新建一个类型，而是创建一个新名字来。本节介绍的类型别名，就是通过关键字。

第 1 行，表示 currentMonth 的值可以是 string 类型或者 number 类型中的一种。，根据其不同的字符串字面量类型引导到不同的 case 分支，这种情况我们称之为『联合类型的应用场景很多，我们在类型保护那一节介绍了大量的联合类型的例子。本节介绍了高级类型中的联合类型，下节开始介绍类型别名。把多个类型连起来，表示它可能是这些类型中的其中一个。联合类型与交叉类型很有关联，但是使用上却完全不同。如果一个值是联合类型，那么只能访问联合类型的。本节介绍联合类型，它使用管道符。

本节起开始介绍 TypeScript 高级类型，依次是交叉类型、联合类型、类型别名、索引类型、映射类型、条件类型。本节介绍交叉类型的语法和应用，跟数学集合里的相交不一样，TypeScript 的交叉类型并不是指每个类型的交集，的意思理解成andA & B表示同时包含A和B的结果。

前面小节中，介绍了 TypeScript 类型检查机制中的类型推断与类型保护，本节来介绍类型兼容性。我们学习类型兼容性，就是在学习 TypeScript 在一个类型能否赋值给其他类型的规则。本节将会详细介绍 TypeScript 在函数、枚举、类和泛型中的类型兼容性规则。

本节开始介绍 TypeScript 一些进阶知识点，第一个要介绍的泛型是 TypeScript 中非常重要的一个概念，它是一种用以增强函数、类和接口能力的非常可靠的手段。如果我们很明确传入的泛型参数是什么类型，或者明确想要操作的某类型的值具有什么属性，那么就需要对泛型进行约束。使用泛型，我们可以轻松地将那些输入重复的代码，构建为可复用的组件，这给予了开发者创造灵活、可重用代码的能力。泛型在 TypeScript 中用途广泛，可以灵活的控制类型之间的约束，提高代码复用性，增强代码可读性。

第 2 行，通过 typeof 关键字，将这个代码块中变量 target 的类型限定为 string 类型。第 12 行，通过 instanceof 关键字，将这个代码块中变量 arg 的类型限定为 User 类型。第 16 行，通过 instanceof 关键字，将这个代码块中变量 arg 的类型限定为 Log 类型。第 12 行，通过 in 关键字，将这个代码块中变量 arg 的类型限定为 User 类型。第 18 行，通过布尔字面量，将这个代码块中变量 arg 的类型限定为 Fail 类型。

是一个嵌套函数，因为编译器无法去除嵌套函数的 null (除非是立即调用的函数表达式)，所以 TypeScript 推断第 3 行的。类型断言主要用于当 TypeScript 推断出来类型并不满足你的需求，你需要手动指定一个类型。最后一行，使用 as 关键字进行了两次断言，最终变量 user 被强制转化为 User 类型。TypeScript 允许你覆盖它的推断，毕竟作为开发者你比编译器更了解你写的代码。，这是一个没有属性的对象，所以你不能对其添加属性。本节介绍类型断言，有使用关键字。

本节介绍其中的类型推断，类型推断主要用于那些没有明确指出类型的地方帮助确定和提供类型，这是 TypeScript 的一种能力。的类型，必须考虑所有的元素类型。类型推断的含义是不需要指定变量类型或函数的返回值类型，TypeScript 可以根据一些简单的规则推断其的类型。当需要从多个元素类型推断出一个类型时，TypeScript 会尽可能推断出一个兼容所有类型的通用类型。类型推断是有方向的，要注意区分从左向右和从右向左两种推断的不同应用。第 1 行，参数 b 有默认值 10，被推断为 number 类型。

类型别名 Result 是一个由两个对象组成的联合类型，都有一个共同的 success 属性，这个属性的类型就是布尔字面量类型。我们之前介绍字符串类型，其实是一个集合类型，所有的字符串集合在一起构成了 string 类型。本小节介绍了几种字面量类型，对于之前没有接触过的同学可能是个新的知识点，在类型保护那一节，我们还会再次介绍到字面量类型，以便巩固学习。本节介绍三种字面量类型，分别是字符串字面量类型、布尔字面量类型和数字字面量类型。通俗的讲，字面量也可以叫直接量，就是你看见什么，它就是什么。

本节介绍 TypeScript 的函数，函数是任何应用程序的基本构建部分，通过函数返回一个计算后的值。TypeScript 的函数声明中函数类型是极为重要的，函数的参数都需要标注参数类型，这可以帮助编译器进行正确的类型推导。本节还会着重讲解 的使用，可以通过编译选项和 this 参数两种方法，正确理解 this 的指向。在 JavaScript 中，函数是头等（first-class）对象，因为它们可以像任何其他对象一样具有属性和方法。在 JavaScript 中，每个函数都是一个 对象。TypeScr

自 ES6 起，终于迎来了class，对于开发者来说，终于可以使用基于类的面向对象式编程。TypeScript 在原 ES6 中类的基础上，还添加了一些新的功能，比如几种访问修饰符，这是在其他面向对象语言中早就实现了的。JavaScript 的类作为语法糖，我们不但需要知道怎么去使用，还应该了解其本质，涉及到原型的部分希望大家能深入理解。

接口是对 JavaScript 本身的随意性进行约束，通过定义一个接口，约定了变量、类、函数等应该按照什么样的格式进行声明，实现多人合作的一致性。本节介绍 TypeScript 各种类型接口的声明及其使用方法，接口在 TypeScript 中是极其重要的，我们使用接口来定义契约，如类型命名、属性检查、函数类型定义等。如果没有特殊声明，定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的，赋值的时候，变量的形状必须和接口的形状保持一致。接口的种类繁多，在学习过程中一定要亲手编写，以达到灵活使用。

本节介绍 never 和 unknown 类型，其中 unknown 类型作为 any 类型对应的安全类型使用起来更加安全，如果有 any 类型的使用需求，应尽量使用 unknown 类型来替代 any 类型。never 类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是 never 的子类型或可以赋值给 never 类型（除了 never 本身之外）。TypeScript 的类型系统会对数据进行类型检查，它可以在编译阶段规避不必要的错误，并且语义化清晰，有助于代码的阅读。类型对应的安全类型。

枚举类型弥补了 JavaScript 的设计不足，很多语言都拥有枚举类型。当我们需要一组相同主题下的数据时，枚举类型就很有用了。enum Size { big = '大', medium = '中', small = '小' }代码中通过枚举类型分别声明了：不同的方向，一年内不同的月份，一个商品的不同尺寸属性，经销商的不同级别，这样的一组常量数据，是在一个相同主题下的不同表示。

声明一个由string和number元组中规定的元素类型顺序必须是完全对照的，而且不能多、不能少，list1中定义的第一个元素为string类型，不能赋值为number类型的数据。第 3 行，list[0]是一个字符串类型，拥有 substr() 方法。第 4 行，list[1]是一个数字类型，没有 substr() 方法，所以报错。要注意元组的越界问题，虽然可以越界添加元素（不建议第 2 行，向一个声明了只有两个元素的元组继续添加元素，这种操作虽然可行，但是严重不建议！

每个Symbol()方法返回的值都是唯一的，所以，sym2 和 sym3 不相等。这种语法会报错，是因为从 ECMAScript 6 开始围绕原始数据类型创建一个显式包装器对象已不再被支持，但因历史遗留原因，以及。

本节介绍的 bigint 数据类型是用来表示那些已经超出了 number 类型最大值的整数值，对于总是被诟病的整数溢出问题，使用了 bigint 后将完美解决。第 3-4 行，bigint 类型就是用来表示那些已经超出了 number 类型最大值的整数值，也就是这个容器还没满，在此基础上加上两个不同的值，其结果不相等。第 3-4 行，最大精度就是这个容器已经完全满了，无论往上加多少都会溢出，所以这两个值是相等的。那么，同样的，0n 是假，10n 是真。的方式，方式不同含义相同，所以完全相等。

自本节起，我们将开始接触 TypeScript 的类型系统，这也是 TypeScript 最为核心的部分。本节介绍 TypeScript 中一些基础类型，有些特殊类型会在接下来进行单节描述。在进行变量声明时，需要注明其对应的类型，这个跟 JavaScript 的变量声明不同。在写 TypeScript 代码时，所有的变量都需要有类型，这个观点要深刻的烙印在心里。

在使用varvar xvar xvar x这是一个完全有效的代码，所有x的声明其实都指向了同一个引用，但这也是很多 bug 产生的原因。letlet x。

本节介绍 TypeScript 的安装与两种使用方式，大家根据本节所介绍的流程一步步操作，相信很快就能编写自己的 TypeScript 代码。