Ts 泛型的深入学习（一）

泛型是typescript中比较难的点，这里记录泛型的使用及思考

函数中的泛型-传入一个类型的参数

    // demo1
    function fn(first: T, second: T):T {
        return first + second;
    }
    fn<string>('a', 'b'); // ab
    fn<number>(1, 2); // 3
    
    // demo2
    function map<T>(params: Array<T>) {
        return params; 
    }
    map<string>(['123'])

函数中的泛型-传入多个类型的参数

    // demo3
    function fn<T, P>(first: T, second: P) {
        return `${first} + ${second}`;
    }
    fn<string, number>('a', 1); // a1

类中的泛型

    // demo4
   interface Item {
       name: string
   }
   class DataManager<T extends Item> {
       constructor(private data: T[]) {}
       getItem(index: number):string {
           return this.data[index].name;
       }
   }
   
   const data = new DataManager<Item>([{
       name: 'dell'
   }])

泛型作为类型的注解

    // demo5
   function hello<T>(params: T) {
       return params;
   }
   const func: <T>(params: T) => T = hello;

泛型中的keyof

    // demo6
  interface Person {
      name: string;
      age: number;
      gender: string;
  }
  class Teacher {
      contructor(private info:Person) {}
      getInfo<T extends keyof Person>(key: T):Person[T] {
          return this.info[key];
      }
  }
  const teacher = new Teacher({
      name: 'dell',
      age: 18,
      gender: 'male',
  });
  const test = teacher.getInfo('dell');
  console.log(test) // dell

• 说明
• keyof相当于将interface中的Person进行了遍历
• T extends 'name' 相当于 type T = name;
• 则key = name
• 则Person['name'] = string