这是我参与「第五届青训营 」伴学笔记创作活动的第 11天
Usage
类型
推断
在定义变量的时候，我们都写明了类型注解，但每一次声明都要写注解，是不是有点“笨”？
实际上，TypeScript 早就考虑到了这么简单而明显的问题。 在很多情况下，TypeScript 会根据上下文环境自动推断出变量的类型，无须我们再写明类型注解。
{
let str = 'this is string'; // 等价 let str: string = 'this is string'; 下面类似
let num = 1; // 等价
let bool = true; // 等价
}
{
const str = 'this is string'; // 不等价
const num = 1; // 不等价
const bool = true; // 不等价
}
我们把 TypeScript 这种基于赋值表达式推断类型的能力称之为类型推断。 在 TypeScript 中，具有初始化值的变量、有默认值的函数参数、函数返回的类型都可以根据上下文推断出来。
断言
有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
这时候我们可以通过断言用来手动指定一个值的类型。值 as 类型 or <类型>值
类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。
TypeScript 类型检测无法做到绝对智能，毕竟程序不能像人一样思考。有时会碰到我们比 TypeScript 更清楚实际类型的情况，比如下面的例子：
const arrayNumber: number[] = [1, 2, 3, 4];
const greaterThan2: number = arrayNumber.find(num => num > 2); // 提示 ts(2322)
const arrayNumber: number[] = [1, 2, 3, 4];
const greaterThan2: number = arrayNumber.find(num => num > 2) as number;
注意在 tsx 语法中必须使用前者，即 值 as 类型。
泛型
什么是泛型？
（from juejin.cn/post/701880… 、 juejin.cn/post/706435…
假如让你实现一个函数 identity，函数的参数可以是任何值，返回值就是将参数原样返回，并且其只能接受一个参数，你会怎么做？
你会觉得这很简单，顺手就写出这样的代码：
const identity = (arg) => arg;
由于其可以接受任意值，也就是说你的函数的入参和返回值都应该可以是任意类型。 现在让我们给代码增加类型声明：
type idBoolean = (arg: boolean) => boolean;
type idNumber = (arg: number) => number;
type idString = (arg: string) => string;
...
一个笨的方法就像上面那样，也就是说 JS 提供多少种类型，就需要复制多少份代码，然后改下类型签名。这对程序员来说是致命的。
这种复制粘贴增加了出错的概率，使得代码难以维护，牵一发而动全身。并且将来 JS 新增新的类型，你仍然需要修改代码，也就是说你的代码对修改开放。
为了解决上面的这些问题，我们使用泛型对上面的代码进行重构。和我们的定义不同，这里用了一个 类型 T，这个 T 是一个抽象类型，只有在调用的时候才确定它的值，这就不用我们复制粘贴无数份代码了。
所以，泛型解决的是输入输出要一致的问题。
（注意：泛型不是为了解决这一个问题设计出来的，泛型还解决了很多其他问题，这里是通过这个例子来引出泛型。）
function identity<T>(arg: T): T {
return arg;
}
其中 T 代表 Type，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外，以下是常见泛型变量代表的意思：
- K（Key）：表示对象中的键类型；
- V（Value）：表示对象中的值类型；
- E（Element）：表示元素类型。
泛型约束
假如我想打印出参数的length属性呢？如果完全不进行约束 TS 是会报错的：
function trace<T>(arg: T): T {
console.log(arg.length); // Error: Property 'size doesn't exist on type 'T'
return arg;
}
这是因为，T 理论上是可以是任何类型的，不同于 any，TS无法确定T是否有这个属性，你不管使用它的什么属性或者方法都会报错（除非这个属性和方法是所有集合共有的）。
那么直观的想法是限定传给 trace 函数的参数类型应该有length类型，这样就不会报错了。如何去表达这个类型约束的点呢？实现这个需求的关键在于使用类型约束。 使用 extends 关键字可以做到这一点。简单来说就是你定义一个类型，然后让 T 继承这个接口即可。
interface Sizeable {
length: number;
}
function trace<T extends Sizeable>(arg: T): T {
console.log(arg.length);
return arg;
}
有的人可能说我直接将 Trace 的参数限定为 Sizeable 类型可以么？如果你这么做，会有类型丢失的风险，详情可以参考这篇文章A use case for TypeScript Generics。
泛型基本使用
处理函数参数
我们使用泛型来解决上文的问题。
泛型的语法是 <> 里写类型参数，一般可以用 T 来表示。
function print<T>(arg:T):T {
console.log(arg)
return arg
}
这样，我们就做到了输入和输出的类型统一，且可以输入输出任何类型。
如果类型不统一，就会报错：
泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。
泛型的写法对前端工程师来说是有些古怪，比如
<>T，但记住就好，只要一看到<>，就知道这是泛型。
我们在使用的时候可以有两种方式指定类型。
- 定义要使用的类型
- TS 类型推断，自动推导出类型
print<string>('hello') // 定义 T 为 string
print('hello') // TS 类型推断，自动推导类型为 string
我们知道，type 和 interface都可以定义函数类型
type
type Print = <T>(arg: T) => T
const printFn:Print = function print(arg) {
console.log(arg)
return arg
}
interface
interface Iprint<T> {
(arg: T): T
}
function print<T>(arg:T) {
console.log(arg)
return arg
}
const myPrint: Iprint<number> = print
默认参数
如果要给泛型加默认参数，可以这么写：
interface Iprint<T = number> {
(arg: T): T
}
function print<T>(arg:T) {
console.log(arg)
return arg
}
const myPrint: Iprint = print
这样默认就是 number 类型了， T 就如同函数参数一样。
处理多个函数参数
现在有这么一个函数，传入一个只有两项的元组，交换元组的第 0 项和第 1 项，返回这个元组。
function swap(tuple) {
return [tuple[1], tuple[0]]
}
这么写，我们就丧失了类型，用泛型来改造一下。
我们用 T 代表第 0 项的类型，用 U 代表第 1 项的类型。
function swap<T, U>(tuple: [T, U]): [U, T]{
return [tuple[1], tuple[0]]
}
这样就可以实现了元组第 0 项和第 1 项类型的控制。
传入的参数里，第 0 项为 string 类型，第 1 项为 number 类型。
在交换函数的返回值里，第 0 项为 number 类型，第 1 项为 string 类型。
第 0 项上全是 number 的方法。
第 1 项上全是 string 的方法。
函数副作用操作
泛型不仅可以很方便地约束函数的参数类型，还可以用在函数执行副作用操作的时候。
比如我们有一个通用的异步请求方法，想根据不同的 url 请求返回不同类型的数据。
function request(url:string) {
return fetch(url).then(res => res.json())
}
调一个获取用户信息的接口：
request('user/info').then(res =>{
console.log(res)
})
这时候的返回结果 res 就是一个 any 类型，非常讨厌。
我们希望调用 API 都清晰的知道返回类型是什么数据结构，就可以这么做：
interface UserInfo {
name: string
age: number
}
function request<T>(url:string): Promise<T> {
return fetch(url).then(res => res.json())
}
request<UserInfo>('user/info').then(res =>{
console.log(res)
})
这样就能很舒服地拿到接口返回的数据类型，开发效率大大提高：
泛型小结
泛型（Generics），从字面上理解，泛型就是一般的，广泛的。
泛型是指在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型。
泛型中的 T 就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。
泛型在成员之间提供有意义的约束，这些成员可以是：函数参数、函数返回值、类的实例成员、类的方法等。
用一张图来总结一下泛型的好处：
