类型兼容性

函数兼容性

函数之间的兼容性比较复杂，需要考虑三个方面 1、参数个数 2、参数类型3、返回值类型

参数个数参数多的兼容参数少的，或者说参数少的可以赋值给多的

type F1 = (a: number) => void
type F2 = (a : number, b: number) => void
let f1: F1
let f2: F2 = f1

解释：

参数少的可以赋值给参数多的，所以，f1赋值可以给f2。
数组forEach方法的第一个参数是回调函数，下面代码示例中类型为:(value:string,index:number,array:string[]) => void

const arr = ['a','b','c']
arr.forEach(()=>{})
arr.forEach((item) =>{})

在JS中省略用不到的函数参数实际上是很常见的，这样的使用方式，促成了TS中函数类型之间的兼容性。
并且因为回调函数是有类型的，所以，TS会自动推导出参数item、index、array的类型

参数类型相同位置的参数类型要相同（原始类型）或兼容（对象类型）

type F1 = (a: number) => string
type F2 = (a: number) => string
let f1:F1
let f2:F2
f2 = fa1

解释：函数类型F2兼容函数类型F1，因为F1和F2的第一个参数类型相同。

interface Point2D {X: number;y: number}
interface Point3D {x: number;y: number;z: number}
type F2 = (p: Point2D) = > void
type F3 = (P: Point3D) => void
let f2: F2
let f3 : F3 = F2

解释：

注意，此处与接口兼容性冲突
技巧：将对象拆开，把每个属性看做一个个参数，则，参数少的（f2）可以赋值给参数多的（f3）

返回值类型只关注返回值类型本身即可

// 原始类型
type F5 = () => string
type F6 = () => string
let f5: F5
let f6: F6 = f5

// 对象类型
type F7 = () => {name: string}
type F8 = () => {name: string;age: number}
let f7: F7
let f8: F8
f7 = f8

解释：

如果返回值类型是原始类型，此时两个类型相同，比如类型F5和F6.
如果返回值类型是对象类型，此时成员多的可以赋值给成员少的，比如类型F7和F8.

交叉类型

交叉类型（&）：功能类似于接口继承（extends），用于组合多个类型为一个类型（常用于对象类型）

interface Person {name: string}
interface Contact {phone: string}
type PersonDetail = Person & Contact
let obj: PersonDetail = {
    name:'jack',
    phone:'159.....'
}

解释：使用交叉类型后，新的类型PersonDetail就同时具备了Person和Contact的所有属性类型，相当于

type PersonDetail = {name: string; phone: string}

交叉类型和接口继承（extends）的对比

相同点：都可以实现对象类型的组合不同点：两种方式实现类型组合时，对于同名属性之间，处理类型冲突的方式不同。

// 方式1
interface A {
    fn: (value: number) => string
}
interface B extends A {
    fn: (value: string) => string
}
// 方式2
interface A {
    fn: (value: number) => string
}
interface B {
    fn: (value: string)=> string
}
type C = A & B

说明：以上代码，借口继承会报错（类型不兼容）；交叉类型没有错误，可以简单的理解为：

fn: (value: string | number) => string

泛型

基本认知

泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class中。需求：创建一个id函数，传入什么数据就返回该数据本身（也就是说，参数和返回值类型相同）。

function id(value: number): number {return value}

比如，id(10)调用以上函数就会直接返回10本身。但是，该函数只接收数值类型，无法用于其他类型。为了能让函数能够接受任意类型，可以将参数类型修改为any。但是，这样就失去了TS的类型保护，类型不安全。

function id(value: any): any {return value}

泛型在保证类型安全（不丢失类型信息）的同时，可以让函数等与多种不同的类型一起工作，灵活可复用。实际上，在C#和Java等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一。

用法

创建泛型函数:

function id<Type>(value: Type): Type {return value}

解释：

语法：在函数名称后面添加<>（尖括号），尖括号中添加类型变量，比如此处的Type。
类型变量Type，是一种特殊类型的变量，它处理类型而不是值。
该类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型由用户调用该函数时指定）。
因为Type是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型。
类型变量Type，可以是任意合法的变量名称。

调用泛型函数：

function id<Type>(value: Type): Type{return value}
const num = id<number>(10)
const str = id<string>('a')

解释：

语法：在函数名称的后面添加<>(尖括号)，尖括号中指定具体的类型，比如，此处的number。
当传入类型number后，这个类型就会被函数声明时指定的类型变量Type捕获到。
此时，Type的类型就是number，所以，函数id参数和返回值的类型也都是number。

同样，如果传入类型string，函数id参数和返回值的类型都是string。这样，通过泛型就做到了让id函数与多种不同类型一起工作，实现了复用的同时保证了类型安全。

简化调用泛型函数：

function id<Type>(value: Type): Type{return value}
// 简化前
let num = id<number>(10)
// 简化后
let num = id(10)

解释：

在调用泛型函数时，可以省略<类型>来简化泛型函数的调用。
此时，TS内部会采用一种叫做类型参数推断的机制，来根据传入的实参自动推断出类型变量Type的类型。
比如，传入实参10，TS会自动推断出变量num的类型number，并作为Type的类型。

推荐：使用这种简化的方式调用泛型函数，使代码更短，更易于阅读。说明：当编译器无法推断类型或者推断的类型不准确时，就需要显示地传入类型参数。

泛型约束

默认情况下，泛型函数的类型变量Type可以代表多个类型，这导致无法访问任何属性。比如id('a')调用函数时获取参数的长度：

function id<Type>(value: Type): Type{
    console.log(value.length) // 错误 拿不到length属性
    return value
}

解释:Type可以代表任意类型，无法保证一定存在length属性，比如number类型没有length。此时，就需要为泛型添加约束来收缩类型（缩窄类型取值范围）。添加泛型约束收缩类型，主要有以下两种方式：

指定更加具体的类型
添加约束

// 指定更加具体的类型
function id<Type>(value: Type[]): Type[] {
    console.log(value.length)
    return value
}

比如，将类型修改为Type[] (Type类型的数组)，因为只要是数组就一定存在length属性，因此就可以访问了。

// 添加约束
interface ILength {length:number}
function id<Type extends ILength>(value:Type): Type {
    console.log(value.length)
    return value
}

解释：

创建描述约束的接口ILength，该接口要求提供length属性。
通过extends关键字使用该接口，为泛型(类型变量)添加约束。
该约束表示:传入的类型必须具有length属性。

注意: 传入的实参(比如，数组)只要有length属性即可，这也符合接口的类型兼容性。

泛型多个类型变量及之间的约束

泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束)。比如，创建一个函数来获取对象中属性的值：

function getProp<Type,Key extends keyof Type>(obj: Type,key: Key){
    return obj[key]
}
let person = {name: 'jack',age: 18}
getProp(person,'name') // 正确
getProp(person,'rose') // 错误

解释：

添加了第二个类型变量key，两个类型变量之间使用(,)逗号分隔。
keyof关键字接收一个对象类型，生成其键名称（可能是字符串或数字）的联合类型。
上面代码中keyof Type实际上获取的是person对象所有键的联合类型，也就是'name' | 'age'。
类型变量key受Type约束，可以理解为：Key只能是Type所有键中的任意一个，或者说只能访问对象中存在的属性。

泛型接口

接口也可以配合泛型来使用，以增加其灵活性，增强其复用性。

// 定义接口泛型
    interface IdFunc<Type> {
        id:(value: Type) => Type
        ids:() => Type
    }
    // 使用泛型接口
    let obj: IdFunc<number> = {
        id(value) {return value},
        ids() {return [1,3,5]}
    }

解释：

在接口名称的后面添加 <类型变量>，那么这个接口就变成了，泛型接口。
接口的类型变量，对接口中所有其他成员可见，也就是 接口中所有成员都可以使用类型变量。
使用泛型接口时，需要显式指定具体的类型 (比如，此处的IdFunc）
此时，id方法的参数和返回值类型都是number；ids方法的返回值类型是number[]

实际上，js中的数组在TS中就是一个泛型接口

    const strs = ['a','b','c']
    strs.forEach
        (method)Array<string>.forEach(callbackfn:(value:string,index:number,array:string[])=>void,thisArg?: any):void

解释：当我们在使用数组时，TS会根据数组的不同类型，来自动将类型变量设置为相应的类型。

技巧：可以通过vscode ctrl+鼠标左键来查看具体的类型信息。

泛型类

泛型类：class也可以配合泛型来使用。

比如，react的class组件的基类Component就是泛型类，不同的组件有不同的props和state

    interface IState {count: number}
    iterface IProps {maxLength: number}
    class InputCount extends React.Component<IProps, IState> {
        state: IState = {
            count: 0
        }
        render() {
            return <div>{this.props.maxLength}</div>
        }
   
    }

解释：React.Component泛型类两个变量，分别指定props和state类型。

创建泛型类：

    class GenericNmumber<NumType>{
        defaultValue: NumType
        add: （x: NmuType, y: NumType）=> NumType
    }

解释：

类似于泛型接口，，在class名称后面添加<类型变量>，这个类就变成了泛型类。
此处的add方法，采用的是箭头函数形式的类型书写方式。

    const myNum = new GenericNumber<number>()
    myNum.defaultValue = 10

类似于泛型接口，在创建class实例时，在类名后面通过<类型>来指定明确的类型。

泛型工具类型

泛型工具类型：TS内置一些常用的工具类型，来简化TS中的一些常见操作。

说明：它们都是基于泛型实现的（泛型适用于多种类型，更加通用），并且是内置的，可以直接在代码中使用。这些工具类型很多，常用的是以下四种:

Partial
Readonly
Pick<Type,keys>
Record<keys,Type>

泛型工具类型-Partial用来构造(创建)一个类型，将Type的所有属性设置为可选。

    interface Props {
    id:string
    children: number[]
}
type PartialProps = Partial<Props>

解释：构造出来的新类型PartialProps结构和props相同，但所有属性都变为可选的。

TypeScript高级类型的简单认知