【学习打卡】第4天 高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第2章 欢迎来到类型的世界 - Typescript

主讲老师：张轩

课程内容：

今天学习的内容包括：

2-10 泛型（Generics） 第一部分
2-11 泛型（Generics） 第二部分 - 约束泛型
2-12 泛型（Generics） 第三部分 - 类和接口

课程收获：

泛型：定义函数、接口或类时，不预先指定具体类型，而在使用时指定类型
定义时用一个未确定的类型变量代替具体的类型，通过在使用时传入的类型决定该未确定类型的具体类型。
场景：定义时可以有多个类型传入，但是又希望传出的类型根据传入的类型进行可控的设置

泛型的定义：

function echo<T>(arg:T):T{
    return arg
}

const result = echo(123)
const result = echo('xiaoh')

泛型操作 T T
T只是一个符号

1. 泛型 Generics

在定义时，不指定类型，在使用时约定

2. eg. 简单用法

function echo <T>(arg: T) : T {

  return arg

}

function swap <T, W>(tuple: [T, W]) : [T, W] {

  return [ tuple[1], tuple[0]  ]

}

const result = swap(['string',  123])

3. 约束泛型

function echoWithArr <T>(arg: T[]) : T[] {  // 在声明伟泛型后，跟上[],  约定泛型包含类型

    console.log（arr.length）

    return arg

}


// 进阶

interface IWithLength {

 length: number

}

function echoWithLength <T extends IWithLength>(arg: T) : T { 

 // <T extends ...>指定泛型包含有 length属性

    console.log（arr.length）

    return arg

}

函数的参数和返回值，使用泛型

类的泛型使用

class Que<T> {

   data:[],

   pop( item:  T):   T {

      this.data.shift( item )

   }

   push(  item:  T):   T{

     this.data.push( item )

   }

}

const que = new Que <number>()

que.push(1)

const que2 = new  Que <string> ()

interface的泛型用法

interface Json <T, U>{
  key: T;

   value: U

}

let    js1:  Json<number, string> = {key: 123,   value: 'one vlue'}

let    js2:  Json<string, boolean > = {key: 'str',   value: true}

let    arr:  number[] = [1, 3, 2]   //  约定数组元素都是number

let    arr2:  Array<number> = [1, 2, 3]   // 原本有个泛型是Array，再指定array的元素是number


interface IPlus<T> {

    (a: T, b: T) : T       //  传入泛型，返回泛型  

}

function plus( a: number,  b: number ): number {

  return a+b

}

function connect( a: string,  b: string ): string {

  return a+b

}

const a :  IPlus<number> = plus  //  指定a函数是泛型函数

const b :  IPlus<string> = plus