Typescrit从入门到放弃系列(七)-泛型

一.指定函数参数类型

单个泛型

const getArray = <T>(times:number,val:T):T[]=>{
    let result:T[] = [];
    for(let i = 0; i<times;i++){
        result.push(val);
    }
    return result;
}
console.log(getArray<number>(3,3)); // 3 => T => number

多个泛型

function swap<T, K>(tuple: [T, K]): [K, T] {
    return [tuple[1], tuple[0]]
}
console.log(swap(['a','b']))

二.函数标注的方式

类型别名

type TArray = <T, K>(tuple: [T, K]) => [K, T];
const getArray:TArray = <T, K>(tuple: [T, K]): [K, T] => {
    return [tuple[1], tuple[0]]
}

接口

interface IArray{
    <T,K>(typle:[T,K]):[K,T]
}
const getArray:IArray = <T, K>(tuple: [T, K]): [K, T] => {
    return [tuple[1], tuple[0]]
}

三.泛型接口使用

interface ISum<T> { // 这里的T是使用接口的时候传入
    <U>(a: T, b: T): U // 这里的U是调用函数的时候传入
}
let sum: ISum<number> = (a:number, b:number) => {
    return 3 as any
}

四.默认泛型

interface T2<T=string>{
    name:T
}
type T22 = T2;
let name1:T22 = {name:'james'}

type T23 = T2<number>;
let name1:T23 = {name:'james'}
// (property) T2<number>.name: number
// Type 'string' is not assignable to type 'number'.ts(2322)
// 1.ts(19, 5): The expected type comes from property 'name' which is declared here on type 'T22'

五.类中的泛型

创建实例时提供类型

class MyArray<T>{ // T => number
    arr: T[] = [];
    add(num: T) {
        this.arr.push(num);
    }
    getMaxNum(): T {
        let arr = this.arr
        let max = arr[0];
        for (let i = 1; i < arr.length; i++) {
            let current = arr[i];
            current > max ? max = current : null
        }
        return max;
    }
}
let myArr = new MyArray<number>();
myArr.add(3);
myArr.add(1);
myArr.add(2);
console.log(myArr.getMaxNum());

校验构造函数类型

const createClass = <T>(clazz: new(name:string,age:number)=>T):T =>{
    return new clazz(name,age);
}
createClass<Person2>(Person2)

六.泛型约束

泛型必须包含某些属性

interface IWithLength {
    length:number
}
function getLen<T extends IWithLength>(val:T){
    return val.length;
}
getLen('hello');

const sum = <T extends number>(a: T, b: T): T => {
    return (a + b) as T
}
let r = sum<number>(1, 2);

返回泛型中指定属性

const person = {
    name: "james",
    age: 18
};
const getVal = <T,K extends keyof T>(obj:T,key:K) : T[K]=>{
    return obj[key];
}
console.log(getVal(person, "name")); // james
console.log(getVal(person, "name1"));
// Argument of type '"name1"' is not assignable to parameter of type '"name" | "age"'.ts(2345)

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。