TypeScript 泛型

泛型

function join(a: string | number, b: string | number) {
  return `${a}${b}`;
}

// 需求：第一个参数和第二个参数类型要一致
/**
 * 泛型
 * 泛指的类型
 * 用的时候知道类型
 * 1、类型推断
 * 2、类型注解
 */
function join1<T>(a: T, b: T) {
  return `${a}${b}`;
}
// T为泛指类型 这里改为string a,b就得是string
join1<string>("1", "2");

// 数组写法1
function map<T>(params: T[]) {
  return params;
}
map<number>([123]);
// 数组写法2
function map1<T>(params: Array<T>) {
  return params;
}
map1<number>([123]);

// 需求第一个参数数字 ，第二个参数字符串
// 泛型的写法
function join2<T, P>(a: T, b: P) {
  return `${a}${b}`;
}
join2<number, string>(1, "1");
// 不写泛型会进行类型推断
join2(1, "1");

// 返回类型泛型
function join3<T>(a: T, b: T): T {
  return a;
}

类中泛型

class DataManager{
    constructor(private data:string[]){}
    getItem(index:number){
        return this.data[index];
    }
}

const datas = new DataManager(["1"]);
datas.getItem(1)

// 需求 不仅string / 还可以其他类型
// private data:string[] | number[] 如果还有其他就需要很长

/**
 * 类中泛型
 */
class DataManager1<T>{
    constructor(private data:T[]){}
    getItem(index:number){
        return this.data[index];
    }
}
const datas1 = new DataManager1<number>([1]);
datas1.getItem(1);

// 泛型类的继承
interface Item{
    name:string
}

class DataManager2<T extends Item>{
    constructor(private data:T[]){}
    getItem(index:number):string{
        return this.data[index].name
    }
}

const data2 = new DataManager2([
    {
        name:"ting"
    }
])

data2.getItem(1);

// 只能number 或者 string
class DataManager3<T extends number | string>{
    constructor(private data:T[]){}
    getItem(index:number):T{
        return this.data[index];
    }
}

// interface Text {
//     name :string
// }
const datas3 = new DataManager1<number>([]);

// 作为TYPE的申明
// 函数类型约束
const func5 :<T>() => string = <T>() =>{
    return "123";
}


// 例子
const func4 : <T>(param:T) => T = <T>(param:T) =>{
    return param;
}

function hello4<T>(param:T):T{
    return param;
}

const func6 : <T>(param:T) => T = hello4

泛型中的keyof

interface Person {
  name: string;
  age: number;
  gender: string;
}

// 类型保护
// class Teacher {
//   constructor(private info: Person) {}
//   getInfo(key: string) {
//     if (key === "name" || key === "age" || key === "gender") {
//       return this.info[key];
//     }
//   }
// }

class Teacher {
  constructor(private info: Person) {}
  // 发型对Person里面的内容进行遍历
  // T extends "name" 等价 type T = "name" 
  // T extends "age" 等价 type T = "age"
  // T extends "gender" 等价 type T = "gender"
  // key 的类型 变成T
  // 返回值是Person[T]
  // type T = "name" 类型可以是字符串 返回为"name"
  getInfo<T extends keyof Person>(key: T): Person[T] {
    // if (key === "name" || key === "age" || key === "gender") {
    return this.info[key];
    // }
  }
}

const teacher = new Teacher({
  name: "tt",
  age: 18,
  gender: "male",
});

const test = teacher.getInfo("name");