这是我参与「第四届青训营 」笔记创作活动的的第9天

TypeScript（基础原理篇）

1.TypeScript简介

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上TypeScript扩展了JavaScript的语法，这意味着他支持所有的 JavaScript 语法。

TypeScript特点：

• 可读性增强：基于语法解析TSDos，ide增强
• 可维护性增强：在编译阶段暴露大部分错误。（多人合作的大型项目中，获得更好的稳定性和开发效率）
• 包含于兼容所有JS特性，支持共存
• 支持渐进式引入与升级

TypeScript与JS相比的优势：

1. TypeScript工具使重构更变的容易、快捷。

2. TypeScript 引入了 JavaScript 中没有的“类”概念。

3. TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中

4. 类型安全功能能在编码期间检测错误，这为开发人员创建了一个更高效的编码和调试过程。

编译器推荐：Visual Studio Code

2.TypeScript变量

ES6新增变量：

• var（全局变量）：全局作用域
• let（块变量）、const（常量）：块级作用域

注意：

• let变量不能重复声明
• const它拥有与 let相同的作用域规则，但是不能对它们重新赋值。
• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格

3.TypeScript基本数据类型

• 任意类型any：声明为 any 的变量可以赋予任意类型的值。
• 数字类型 number：双精度 64 位浮点值。它可以用来表示整数和分数
• 字符串类型 string：一个字符系列，使用单引号（ ’ ）或双引号（ " ）来表示字符串类型。反引号（ ` ）来定义多行文本和内嵌表达式
• 布尔类型 boolean：表示逻辑值：true 和 false
• 数组类型 ：声明变量为数组
• void类型：没有任何类型（声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null）

扩展：

• 元组类型：用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
• 枚举类型 enum：枚举类型用于定义数值集合
• null ：表示对象缺失
• undefined ：初始化变量为一个未定义的值
• never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

4.TypeScript对象类型

接口（interface） ：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。

注意：使用interface关键字定义接口一般首字母大写，并在接口名称上加上大写 I 前缀。

• 可选属性：定义该属性可以不存在。（在该属性后加上？号）。
• 只读属性：约束属性不可在对象初始化外赋值。（在对象的某个或某些属性前加上关键字 readonly，可以设置该属性为只读属性）。
• 任意属性：约束所以对象属性都必须是该属性的子类型。

5.TypeScript函数类型

在 TypeScript 中，有两种常见的定义函数的方式——函数声明（Function Declaration）和函数表达式Function Expression）。

TypeScript中函数类型：

TypeScript中函数表达式：

注意：不要混淆了 TypeScript 中的 => 和 ES6中的 =>。

• 在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
• 在 ES6 中，=> 叫做箭头函数，应用十分广泛。

可以参考 ES6 中的箭头函数(Search · 箭头函数 · GitHub)。

6.TypeScript重载

函数重载：具备不同参数的同名函数。

函数重载具有两个特征：名称相同，参数不同（参数类型、个数不同。）

注意：函数重载是多态的一种体现

TypeScript中，函数重载主要包括两部分：函数声明，和函数实现。

函数声明：是TSC解析的一种声明体现，实际编译中，并不会编译成具体代码。我们可以通过TypeScript的playground来查看。 —————————————————————————————————————————————————— 参数不同的函数重载：

而当这两种声明，同时存在TypeScript的声明文件中，我们就需要用函数重载来实现，这是JavaScript没有的特性（可选类型）。 —————————————————————————————————————————————————— 参数个数相同，但类型不同的函数重载

函数声明中，参数的类型是不同的，在这种情况下，里就要用到联合类型，如下所示： —————————————————————————————————————————————————— 函数重载的总结
从我们实现两个函数重载的例子可以看出，我们在TypeScript中实现函数重载的方式分别是利用了TypeScript中的两个类型特性：可选类型以及联合类型。

原文链接

7.TypeScript数组类型

TypeScript数组类型即：声明变量为数组。

数值数组、字符串数组等 (number[]，string[] )是泛型数组Array<string>，Array<string>的简写。如下图

定义数组的方法：

数组方法：

• every() 检测数值元素的每个元素是否都符合条件
• some() 检测数组元素中是否有元素符合指定条件
• concat() 连接两个或更多的数组，并返回结果
• filter() 检测数值元素，并返回符合条件所有元素的数组
• forEach() 数组每个元素都执行一次回调函数
• indexOf() 搜索数组中的元素，并返回它所在的位置
• join() 把数组的所有元素放入一个字符串
• lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
• map() 通过指定函数处理数组的每个元素，并返回处理后的数组
• pop() 删除数组的最后一个元素并返回删除的元素
• push() 向数组的末尾添加一个或更多元素，并返回新的长度
• reduce() 将数组元素计算为一个值（从左到右）
• reduceRight() 将数组元素计算为一个值（从右到左）
• reverse() 反转数组的元素顺序
• shift() 删除并返回数组的第一个元素
• slice() 选取数组的的一部分，并返回一个新数组
• sort() 对数组的元素进行排序
• splice() 从数组中添加或删除元素
• toString() 把数组转换为字符串，并返回结果
• unshift() 向数组的开头添加一个或更多元素，并返回新的长度

7.1-Tuple Types（元祖类型）

元组类型是另一种特殊的数组类型，一般来说它可以存储不同类型的成员，限定了数组的长度及每个成员的类型。(普通数组也可以通过指定联合类型的类型参数，从而存放不同类型的成员) 。元组的成员是可以被修改，可以调用一系列的数组方法。

7.2-ReadonlyArray 只读数组

只读数组是TS提供的一种特殊的数组，它的任何成员都不能被修改。

特点：

• 无法进行新增、删除、替换等操作，push、pop等修改自身的方法都无法使用。
• 可以使用不修改自身的数组方法。例如使用slice方法，返回一个普通的数组
• 代表一种类型，无法当作构造函数使用，不能使用new操作符。
• 在声明一个只读数组类型的变量时需指定类型参数，只读数组里只能存放该类型的值。
• 只读数组类型的变量本身可以接收普通数组的赋值。
• 普通数组不能接收只读数组的赋值

原文链接

8.联合/交叉类型

联合类型：联合类型表示取值可以为多种类型中的一种，使用 | 分割每个类型。 约束取值：

以上1 | 2, true | false, ‘click’ | scroll | 'mousemove’被称为字面量类型，分别为数字、布尔、字符串字面量类型，可以用来约束取值只能是其中几个值中的一个。

交叉类型：交叉类型是将多个类型合并为一个类型，使用&定义交叉类型。 可以将多个接口类型合并成一个类型，实现等同于接口继承，如下图：

9.类型保护和类型守卫

类型保护是一种TypeScript技术，用于获取变量类型信息，通常使用在条件块语句中。类型保护具有唯一的属性，可以确保测试的值是根据返回的布尔值设置的类型。

联合类型+类型保护=自动类型推断

有五种主要的方式来使用类型保护:

• instanceof关键字
• typeof关键字
• in关键字
• 等式收缩式保护器
• 带有谓词的自定义类型保护

类型守卫：定义一个函数，他返回值是一个类型谓词，生效范围为子作用域。

10.高级类型

索引类型：

• 关键字【keyof】：其相当于取值对象中的所有key组成的字符串字面量，如：
• 关键字【in】：其相当于取值字符串字面量中的一种可能，配合泛型p，即表示每个Key。
• 关键字【？】：通过设定对象可选选项，即可自动推导出子集类型。

函数返回值类型：

• 关键字【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式，如T===判断类型？类型A：类型B
• 关键字【infer】：出现在类型推荐中，表示定义类型变量，可以用于指代类型。

11.个人总结

这是在青训营学习前端的第9天，今天主要讲的是TypeScript的一些基础知识，我主要学习了关于TypeScript基本数据类型、变量、重载等基础知识。对于我来说，通过今天的学习，我掌握了TypeScript定义函数的方法，然后我根据老师上课所说的知识+课外查询的资料整理成了以上这篇文章，主要针对TypeScript的基础知识，让大家更好的掌握使用TypeScript，一起从底层基础开始学习，希望能帮助到大家，谢谢！