typeScript学习

泛型

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

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

泛型默认值。

泛型约束。

泛型在Vue3 源码中的应用。

exends keyof + keyof 的联合应用。

泛型反向赋值。

具有以下特点的数据类型叫泛型：

特点一：定义时不明确使用时必须明确成某种具体数据类型的数据类型。【泛型的宽泛】

特点二：编译期间进行数据类型检查的数据类型。【泛型的严谨】

// class 类名<泛型形参类型> 泛型形参类型一般有两种表示：1. A - Z 任何一个字母；2. 语义化的单词来表示，绝大多数情况，泛型都是采用第一种形式表示，如下：

class ArrayList<T>{
    array!: Array<T>
    add(data: T) {
        // ...
    }
    // ...
}

// any 不进行类型检查
interface Ref<V> {
    value: V
}

let ref: Ref<string> = {
    value: "abc"
}

type Student = { name: string, age: number }

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


console.log(ref2.value.age) // 23
console.log(ref2.value.name) // wangwu

泛型默认值

// 泛型的默认值
class ArrayList<T = any> {
    arr: Array<T>;
    index: number = 0
    constructor() {
        this.arr = []
    }
    add(ele: T) {
        this.arr[this.index++] = ele
    }
    get(index: number) {
        return this.arr[index]
    }
}

let arrlist3 = new ArrayList() // 默认值 any

export { }

keyof 表示获取一个类或者一个对象类型或者一个接口类型的所有属性名【key】组成的联合类型。

索引访问类型

泛型约束

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

// 泛型约束
type InstancePropKeys<T extends object> = keyof T

// type OrdPropKeys = InstancePropKeys<{ username: 'wangwu' }>
type OrdPropKeys = InstancePropKeys<Order>

// type OrdIdType = Order["orderid"]
type OrdInstanceAttrNames = keyof Order
let oian: OrdInstanceAttrNames = "ordername"
// let oian: OrdInstanceAttrNames = "count" // 错误

反向为泛型赋值

class ObjectRefImpl<T extends object, K extends keyof T>{
    public readonly _v_isRef = true

    constructor(private readonly _object: T, private readonly _key: K) { }

    get value() {
        return this._object[this._key]
    }
    set value(newVal) {
        this._object[this._key] = newVal
    }
}

type ObjType = { username: string, age: number }

// let obj = new ObjectRefImpl<ObjType, "age">({ username: 'wangwu', age: 25 }, "username")
let obj = new ObjectRefImpl({ username: 'wangwu', age: 25 }, "username")
console.log("obj.value:", obj.value) // obj.value: 25

export { }