前端TS学习第六天

泛型从入门到深入掌握

为什么要用泛型？泛型定义。

泛型

定义：

• 定义时不明确使用时必须明确成某种具体数据类型的数据类型【泛型的宽泛】
• 编译期间进行数据类型检查的数据类型【泛型的严谨】
  

**好处就是可以灵活的设置变量类型，不仅如此还可以将设置的变量类型所包含的属性也体现出来。

interface Ref<T>{
    value:T
}

let ref:Ref<string>={
    value:"wangwu",
}
type Student={name:string,age:number}

let ref2:Ref<Student>={
    value:{name:"wangwu",age:23},
}

console.log(ref2.value.name);
export {}

泛型在类中的应用？封装一个面向对象的ArrayList类

class ArrayList<T>{
    arr:Array<T>;
    index:number=0;
    constructor() {
        this.arr=[]
    }
    add(ele:T){
        this.arr[this.index++]=ele;
    }
    get(index:number){
        return this.arr[this.index]
    }
}
let arrList = new ArrayList<string>();
arrList.add("abc")
arrList.get(23)

let arrList2 = new ArrayList<{ username:string;age:number}>();
arrList2.add({username:"wangwu",age:23})

export{}

泛型默认值

<T=“类型”>设置默认值

class ArrayList<T=any>{}//你想让它默认值是多少你就在any那个位置写类型就行

泛型约束

class Order{
    orderid!:boolean
    ordername!:string
    static count:number
    printOrd(){}
    static getCount(){}
}

//type OrdIdTyper = Order["orderid"]

type OrdInstanceAttrNames = keyof Order
// let oian:OrdInstanceAttrNames="ordername"

//下面就是提取一个类所有属性类型的通用方法
type InstancePropKeys<T extends object> = keyof T
type OrdPropKeys=InstancePropKeys<Order>

泛型在Vue3源码中的应用

extends keyof +keyof 的联合应用

在这里稍微插入一下keyof 的使用
keyof：是用于获取某个类型的所有键，其返回类型是联合类型

interface Person {
  name: string;
  age: number;
  location: string;
}

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // number | "length" | "push" | "concat" | ...
type K3 = keyof { [x: string]: Person };  // string | number

上述例子中，K3返回的是string | number是因为，在js中，对象的key，obj[1] == obj[“1”]。

泛型反向赋值

反向赋值是啥意思呢，我自我的理解哈，如果你是正向定义的泛型，比如

这就是相当于你直接给泛型定义了类型，但是呢，有时候定义好类型之后，就会在传参的时候让泛型的类型固定死，你就穿不了其他类型了，就比如上面这个例子，你就只能在传参的时候，第二个参数传age，但是呢如果想灵活一点，就不要在申明的时候加这个<>去定义泛型的类型，这样子就很麻烦，你可以像下面一样，直接不定义泛型的类型，你直接传参，你传的参数的类型就会反向给泛型，泛型就会拿到你参数的类型，这就叫泛型反向赋值，我也不知道理解的正不正确，有大佬可以评论！！！！