TypeScript 泛型

目录

• TypeScript 泛型
• 初试泛型
• 泛型约束

 

TypeScript 泛型

泛型是类型的变量，可以动态填入类型值
泛型还可以继承接口从而实现对填入类型的约束

初试泛型

    const log = console.log

    // 为函数添加泛型，此时T表示形参类型
    // 定义一个打印函数，打印并返回此形参
    function print<T>(arg: T): T {
        log(arg)
        return arg
    }
    // let str: string = 'str'
    // print(str)

    // 交换元组的元素顺序
    function swap<T, U>(tuple: [T, U]): [U, T] {
        return [tuple[1], tuple[0]]
    }
    print(swap([1, 'a'])) // ['a',1]

    function printArr<T>(arg: T[]): T[] {
        log(arg)
        return arg
    }
    printArr([1])

泛型约束

有时候我们希望对形参做一些定制化的约束，比如限制形参必须含有length属性，这时候可以使用接口结合泛型来做

    interface IHasLength {
        length: number;
    }

    function getLength<T extends IHasLength>(arg: T): number {
        return arg.length
    }
    print(getLength('test'))
    print(getLength(['1', 'a']))
    print(getLength({ length: 231 }))

当然也可以指定泛型属性，在指定属性名之后灵活地设置属性的类型

    interface IHasLength<T> {
        length: T;
    }

    function getNumberLength<T extends IHasLength<number>>(arg: T): number {
        return arg.length
    }
    function getStringLength<T extends IHasLength<string>>(arg: T): string {
        return arg.length
    }

    print(getNumberLength('test'))
    print(getNumberLength(['1', 'a']))
    print(getNumberLength({ length: 231 }))

    print(getStringLength({ length: '123' }))

接口并非都是用来限制内部属性，也可以限制接口的实现者就是一个函数

    // 必须拥有一个属性为fn的函数
    interface IHasFn {
        fn: (arg: any) => any
    };

    // 必须就是一个函数
    interface IAmFn {
        (arg: any): any
    }

    // 获取形参为fn的函数
    function getFn<T extends IHasFn>(arg: T): Function {
        log(arg.toString())
        return arg.fn
    }

    getFn({
        fn: function (arg: any) {
            let a = 1; a = a - 1;
            return arg
        }
    })

    // 获取是函数的形参本身
    function getFn2<T extends IAmFn>(arg: T): Function {
        log(arg.toString())
        return arg
    }

    getFn2(() => { })