ts 泛型介绍及使用

• 把传入的任意值按照次数填充返回一个数组

// value  任意类型
// timers number类型的数字
// 返回以timers为个数的数组
const getArray = (value: any, timers: number = 5): any[] => {
   return new Array(timers).fill(value);
}
// tslint:disable-next-line: no-console
console.log(getArray({ name: "zhangsan", age: 20 }, 3));
console.log(getArray(9, 3).map(_ => _ + 2));
console.log(getArray('hello', 3).map(_ => _.length));

• 这样就丧失了类型的校验，我们把上述函数修改成泛型

const getArrayGen = <T>(value: T, timers: number = 2): T[] => {
   return new Array(timers).fill(value);
}
// 使用的时候传入对应的数值类型即可
console.log(getArrayGen<number>(4))
console.log(getArrayGen<string>('qwe', 3))
console.log(getArrayGen<object>({ name: 'asan', sex: 'man' }, 1))
const getArrayParam = <T, U>(param1: T, param2: U, timers: number = 2): Array<[T, U]> => {
   return new Array(timers).fill([param1, param2])
}
console.log(getArrayParam<number, string>(2, 'wanghui'))

• 泛型在类型定义中的使用

let getArray2: <T>(arg: T, times: number) => T[]
getArray2 = (arg: any, times: number) => {
   return new Array(times).fill(arg)
}
console.log(getArray2<string>("wo shi array2", 2))

• 使用类型别名，定义泛型函数

type getArray3 = <T>(arg1: T, times: number) => T[]
let getArray3: getArray3 = (arg: any, timers: number) => {
   return new Array(timers).fill(arg);
}
console.log(getArray3({ age: 20, weight: 45 }, 2))

• 使用接口定义泛型函数

interface GetArray {
   <T>(arg: T, time: number): T[]
}
let getArray4: GetArray = (arg: any, time: number) => {
   return new Array(time).fill(arg)
}
console.log(getArray4('小桥流水人家', 2))

• 可以把整个接口的设置都满足你想要的泛型定义

interface IGenSetAll<T> {
   (param: T, color: number): T[],
   array: T[]
}

• 泛型的约束，以及条件限制,必需有length属性的

interface IValueHasLength {
   length: number
}
const getArray5 = <T extends IValueHasLength>(arg: T, times: number): T[] => {
   return new Array(times).fill(arg)
}
console.log(getArray5({
   length: 3
}, 2))

• 在泛型约束中使用参数

const getProps = (object, propName) => {
   return object[propName]
}
const objs = {
   a: 'a',
   b: 'b'
}
console.log(getProps(objs, 'a'))
// console.log(getProps(objs, 'c')) // 这里整个c返回的是undefined

• keyof 属性名 返回一个对象上的所有属性的集合（数组）
• 那我们怎么在使用的时候就直接避免这种undefined的情况呢。请看如下：

const getProps6 = <T, K extends keyof T>(object: T, propName: K) => {
   return object[propName]
}
const showObj = {
   a: 'name',
   b: 'size'
}
console.log(getProps6(showObj, 'a'))
// console.log(getProps6(showObj, 'c')) // 泛型约束已经进行约束，所以这里使用的时候就已经报错了