一、为什么要学习TS
1.趋势 从Vue3.0开始，前端三大主流框架已经全部支持ts，跟着大部队走肯定没问题。
2.易维护
TS vs JS
TS带来了什么？
- 类型安全
- 下一代JS特性
- 完善的工具链
TS推荐
github.com/dzharii/awe…：TS开源教程及应用
www.typescriptlang.org/play?#code/…：TS到JS在线编译
二、TS基础
基础类型
函数类型
- 定义:TS定义函数类型时要定义输入参数类型和输出类型
- 输入参数:参数支持可选参数和默认参数。
- 输出参数:输出可以自动推断，没有返回值时，默认为void类型
- 函数重载:名称相同但参数不同，可以通过重载支持多种类型
ps:
interface
- 定义：接口是为了定义对象类型
- 特点：
- 可选属性: ?
- 只读属性: readonly
- 可以描述函数类型
- 可以描述自定义属性
- 总结：接口非常灵活duck typing
ps
类
在ES6中拥有了class关键字，虽然它的本质依旧是构造函数，但是能够让开发者更舒服的使用class了。 TypeScript 作为 JavaScript 的超集，自然也是支持 class 全部特性的，并且还可以对类的属性、方法等进行静态类型检测。
-
定义：写法与JS差不多，增加了一些定义。
-
特点：
- 增加了private, public, protected修饰符
- 抽象类：
- 只能被继承，不能被实例化。
- 作为基类，抽象方法必须被子类实现。
- interface约束类，使用implements关键字
ps
TS进阶
高级类型
TypeScript中除了基本类型之外，还定义了很多高级类型，高级类型包括字面量类型、联合类型、交叉类型、索引类型、映射类型、条件类型、this类型等。
- 联合类型
|
联合类型表示多种类型中的一种
- 交叉类型
&
交叉类型用于组合多个类型为一个类型，常用于对象类型
- 类型断言
as!
把两种能有重叠关系的数据类型进行相互转换的一种 TS 语法，把其中的一种数据类型转换成另外一种数据类型。类型断言和类型转换产生的效果一样，但语法格式不同。
类型断言有两种形式:
- “尖括号” 语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
- as 语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
-
类型别名(type VS interface)
-
定义：给类型起个别名
-
相同点：
- 都可以定义对象或函数
- 都允许继承
-
差异点：
- interface是 TS 用来定义对象，type 是用来定义别名方便使用;
- type 可以定义基本类型，interface 不行 ;
- interface 可以合并重复声明，type 不行;
-
泛型
什么时候需要泛型
- 定义：软件工程中，我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型， 这在创建大型系统时为你提供了十分灵活的功能。 在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件, 一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
基本使用
什么是泛型函数 ：
这个函数的参数类型或者返回值的类型是可变的
定义泛型函数 :
function 函数名<类型参数> (形参:类型参数):类型参数{}
- 在函数名称的后面写
<>(尖括号)，尖括号中添加类型变量 - 类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)
使用泛型函数
-
方法1:
const 返回值 = 函数名(实参)类型推论实参的类型,传递给类型参数 -
方法2 :
const 返回值= 函数名<类型实参>(实参)上述的非空断言就使用了此种方法- 此时的
<>中的就是具体的类型
- 此时的
泛型的问题
太灵活了
- 默认情况下，泛型函数的类型变量 可以代表多个类型，这导致在泛型函数内部无法访问任何属性
泛型工具类型-基础操作符
typeof：获取类型eyof：操作符可以用来获取一个对象类型的所有键。in：操作符可以用来遍历枚举类型。in：操作符可以用来遍历枚举类型。T[K]：索引访问操作符T[K]可以用来获取对象类型T的属性K的类型。extends：条件类型中的extends关键字可以用来判断一个类型是否能够赋值给另一个类型。
