7.ts泛型

67 阅读1分钟
  • 指定函数参数类型
  1. 单个泛型
const genStrinArr = <T>(conut: number, val: T): T[] => {
  let res: T[] = []
  for (let i = 0; i < conut; i++) {
    res.push(val)
  }
  return res
}
genStrinArr(3, '3')

image.png

image.png

  1. 多个泛型
interface Person<T, K> {
  key: T,
  value: K
}
function getName<T, K>(params: Person<T, K>): void {
  console.log(`Key: ${params.key}, Value: ${params.value}`);
}

const pair: Person<string, number> = {
  key: 'age',
  value: 25
};

getName(pair);
  • 函数标注的方式
  1. 类型别名
  2. 可以使用类型别名,但是类型别名不能被继承和实现。一般联合类型可以使用类型别名来声明
type NameAge = <T, K>(obj: [T, K]) => [T, K]
const Name: NameAge = <T, K>(obj: [T, K]): [T, K] => {
  return [obj[0], obj[1]]
}
console.log(Name(['x', 22]))

image.png 2.接口

interface MName {
  <T, K>(obj: [T, K]): [K, T]
}

const myName: MName = <T, K>(obj: [T, K]): [K, T] => {
  return [obj[1], obj[0]]
}

console.log(myName([1, '2']))

image.png

  • 泛型接口
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:'zf'}
  • 类中的泛型
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());
  • 泛型约束
  1. 泛型必须包含某些属性
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 getVal = <T,K extends keyof T>(obj:T,key:K) : T[K]=>{
    return obj[key];
}