泛型

1. 泛型的基本使用

export default {};

// 不使用泛型
// let getArray = (value: number, items: number): number[] => {
//   return new Array(items).fill(value);
// }

// // let arr = getArray(8, 5);
// let arr = getArray("abc", 3)
// console.log(arr);

// let getArray = (value: any, items: number): any[] => {
//   return new Array(items).fill(value);
// }
// // let arr = getArray("刘亦菲", 3)
// let arr = getArray(8, 3)
// // console.log(arr);

// let res = arr.map(item => item.length);
// console.log(res);

// 使用泛型
let getArray = <T,>(value: T, items: number): T[] => {
  return new Array(items).fill(value);
};

let arr = getArray<string>("刘亦菲111", 3);
// let arr = getArray<number>(8, 3);

let res = arr.map((item) => item.length);
console.log(res);

2. 泛型约束

export default {};

// 演示可能会出现的问题
// function getLength<T>(arr: T): T {
//   console.log(arr.length);

//   return arr;
// }

// getLength<string>("孟子义");

// 解决方式
// function getLength<T>(arr: Array<T>): Array<T> {
//   console.log(arr.length);

//   return arr;
// }

// // let res =  getLength([1, 2, 3]);
// // {length: 20}
// let res = getLength("孟子义");
// console.log(res);

// 泛型接口
interface ILength {
  length: number;
}

function getLength<T extends ILength>(arr: T): number {
  return arr.length;
}

let res1 = getLength("孟子义");
let res2 = getLength([1, 2, 3, 4]);
let res3 = getLength({ length: 20 });

console.log("res1: ", res1);
console.log("res2: ", res2);
console.log("res3: ", res3);

3. 泛型接口

export default {};

// interface IPerson {
//   name: string;
//   age: number;
// }

// let p: IPerson = {
//   name: "于文文",
//   age: 18
// }

// interface IPerson<T1, T2> {
//   name: T1;
//   age: T2;
// }

// let p: IPerson<string, number> = {
//   name: "于文文",
//   age: 18
// }

// 泛型也可以拥有默认值
// 注意点：我们的默认值是类型, 而不是初始化的具体值
interface IPerson<T1 = String, T2 = number> {
  name: T1;
  age: T2;
}

let p: IPerson = {
  name: "于文文",
  age: 50,
};
console.log(p);

4. 泛型类

export default {};

// string number
class Person<T1, T2> {
  name: T1;
  age: T2;
  sex: T1;

  constructor(name: T1, age: T2, sex: T1) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
}

const p1 = new Person("刘诗诗", 18, "女");
console.log(p1);

const p2 = new Person<String, number>("虞书欣", 18, "女");
console.log(p2);

const p3: Person<String, number> = new Person("刘诗诗", 18, "女");
console.log(p3);

5. 使用类型参数进行约束

export default {};

// interface IKeyInterface {
//   [key: string]: any
// }

// let getProps = (obj: IKeyInterface, key: string): any => {
//   return obj[key];
// }

// // {a:1, b: 2}

// let x = {a:1, b: 2};
// // let res = getProps(x, "b");
// let res = getProps(x, "c"); // undefined
// console.log(res);

// 注意点: K 就代表 T 中必须有的属性
// T: number, age   K: number / age  != sex
function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

let x = { a: 1, b: 2 };
// let res =  getProperty(x, "c");
// console.log(res);