TypeScript-泛型、泛型约束

详情可见
1.什么是泛型?

1.在编写代码的时候我们既要考虑代码的健壮性, 又要考虑代码的灵活性和可重用性
  通过TS的静态检测能让我们编写的代码变得更加健壮, 但是在变得健壮的同时却丢
  失了灵活性和可重用性 所以为了解决这个问题TS推出了泛型的概念
2.过泛型不仅可以让我们的代码变得更加健壮, 还能让我们的代码在变得健壮的同时
  保持灵活性和可重用性

2.为什么使用泛型？
一个简单的列子
需求: 定义一个创建数组的方法, 可以创建出指定长度的数组, 并且可以用任意指定的内容填充这个数组
示例一

弊端：无法灵活使用不同类型数据 函数value为number 只能传入number

let getArray = (value:number, items:number = 5):number[]=>{
    return new Array(items).fill(value);
};
// let arr = getArray(6, 3);
let arr = getArray("abc", 3); // 报错
console.log(arr);

示例二

修改类型为any
 当前存储的问题:
 1.编写代码没有提示, 因为TS的静态检测不知道具体是什么类型
 2.哪怕代码写错了也不会报错, 因为TS的静态检测不知道具体是什么类型
 3.比如想使用字符串的长度length，但是我传入的是number，但是不会报错，不利 
 	于编写代码
let getArray = (value:any, items:number = 5):any[]=>{
    return new Array(items).fill(value);
};
// let arr = getArray("abc", 3);
let arr = getArray(6, 3);
// console.log(arr);
let res = arr.map(item=>item.length); // ['abc', 'abc', 'abc'] => [3, 3, 3]
console.log(res);

3.如何使用泛型？

 需求:要有代码提示, 如果写错了要在编译的时候报错
 注意T可以是任意字母 但是前后要对应
let getArray = <T>(value:T, items:number = 5):T[]=>{
    return new Array(items).fill(value);
};
1.完整写法
 let arr = getArray<string>('abc');
 let arr = getArray<number>(6);
2.简写
注意点: 泛型具体的类型可以不指定
	    如果没有指定, 那么就会根据我们传递的泛型参数自动推导出来
let arr = getArray('abc');
// let arr = getArray(6);
let res = arr.map(item=>item.length);
console.log(res);

4.泛型约束

什么是泛型约束?
默认情况下我们可以指定泛型为任意类型
但是有些情况下我们需要指定的类型满足某些条件后才能指定
那么这个时候我们就可以使用泛型约束

 需求: 要求指定的泛型类型必须有Length属性才可以
interface LengthInterface{
    length:number
}
let getArray = <T extends LengthInterface>(value:T, items:number = 5):T[]=>{
    return new Array(items).fill(value);
};
let arr = getArray<string>('abc');
// let arr = getArray(6);
let res = arr.map(item=>item.length);

5.在泛型约束中使用类型参数

在泛型约束中使用类型参数?
一个泛型被另一个泛型约束, 就叫做泛型约束中使用类型参数

1.错误示例

明明obj里面没有key为c的值 但是编写代码的时候不会报错 代码不够健壮

let getProps = (obj:obj, key:string):any=>{
    return obj[key];
}
let obj = {
    a:'a',
    b:'b'
}
 let res = getProps(obj, "c");

2.正确示例

 需求: 定义一个函数用于根据指定的key获取对象的value
 K extends keyof T 的意思是传入的key必须是T里面存在的 也就是obj里面存在的key

let getProps = <T, K extends keyof T>(obj:T, key:K):any=>{
    return obj[key];
}
let obj = {
    a:'a',
    b:'b'
}
// 代码不够健壮, 明明obj中没有c这个key但是却没有报错
// let res = getProps(obj, "c");
let res = getProps(obj, "a");
console.log(res);