Typescript学习9 ( 泛型 | 泛型约束 )

一、泛型

1.类型不同，实现的功能是一样的，这时候我们就可以使用泛型来优化

函数泛型

function num(a: number, b: number): Array<number> {
    return [a, b]
}
function str(a: string, b: string): Array<string> {
    return [a, b]
}

2.泛型优化，函数后<>里可以通过一个占位符来定义泛型，也就是动态类型

function test<T>(a: T, b: T): Array<T>{ //占位符可以为任意字符
    return [a,b]
}
test(1, 2) //泛型可以自动推断出类型
test('1','2')

3.泛型可以使用不同类型参数名来对应不同的类型，数量也要对应上

function test<T, U>(a: T, b: U): Array<T | U> {
    return [a, b]
}
test(false, 1)

4.定义泛型接口

interface test<T> {
    msg: T
}
let message: test<string> = {
    msg: '123'
}

5.type泛型

type A<T> = T //任何类型都可以
let num: A<number> = 1 
let str: A<string> = 'sss'
let nul: A<null> = null 

6.泛型应用场景实例

// 封装axios
const axios = {
    get<T>(url: string): Promise<T> { //返回promise泛型
        return new Promise((resolve, reject) => {
            let xhr: XMLHttpRequest = new XMLHttpRequest()
            xhr.open('GET', url)
            xhr.onreadystatechange = () => { //检测状态变化
                if (xhr.readyState == 4 && xhr.status == 200) {
                    resolve(JSON.parse(xhr.responseText))
                }
            }
            xhr.send(null)
        })
    }
}
interface A {
    message: string,
    code: number
}
axios.get<A>('./index,json').then(res => {
    console.log(res.code);
})

二、泛型约束

1.泛型 extends 类型 ，泛型约束用来约束泛型的类型

数字类型

function add<T extends number>(a: T, b: T) {
    return a + b
}
add(1, 2)

字符串类型

function len<T extends string>(a: T) {
    return a.length
}
len('111')

接口类型

interface len{
    length:number
}
function fn<T extends len>(a: T) {
    return a.length
}
fn('111')

2.keyof 泛型，可以约束为对象的属性的联合类型

let obj = {
    name: '小胖',
    age: 18
}
//此时key的类型约束为 name|age 类型
function get<T extends Object, K extends keyof T>(obj: T, key: K) {
    return obj[key]
}
get(obj, "name")

3.泛型类

声明方法:名称后面定义<类型> ，使用的时候确定类型 new Sub<类型>()

class Sub<T>{
    arr: T[] = [];
    add(a: T): T[] {
        return [a]
    }
}
let s = new Sub<number>()
s.arr = [1, 2, 3]
s.add(123)
let str = new Sub<string>()
str.arr = ['1', '2', '3']
str.add('123')