typescript学习(三)

这里主要学习如何去使用泛型,泛型算是typescript中的重点和难点,在实现接口当中经常会去使用。

• 泛型可以理解为宽泛的类型，通常用于类和函数。使用的时候我们再指定类型
• 泛型不仅可以让我们的代码变得更加健壮, 还能让我们的代码在变得健壮的同时保持灵活性和可重用性
• 通过用 <T>来表示，放在参数的前面

什么时候使用泛型

当我们传入的值不确定,效果也不确定的时候就使用泛型

// 不使用泛型
// let getArray = (value:number, items:number):number[]=>{
//     return new Array(items).fill(value);
// };
// let arr = getArray(8, 3);
// // let arr = getArray("abc", 3); // 报错
// console.log(arr);


// let getArray = (value:any, items:number):any[]=>{
//     return new Array(items).fill(value);
// };

// let arr = getArray("刘亦菲", 10)
// // let arr = getArray(10, 10)
// 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>("刘亦菲", 3)
// let arr = getArray<number>(10, 3)

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

// 回顾
const techArr1: string[] = ["HTML", "CSS", "JS"];
const techArr2: Array<String> = ["VUE", "REACT", "ANGULAR"];

2.泛型约束

• 在TS中，我们需要严格的设置各种类型，我们使用泛型之后，将会变得更加灵活，但同时也将会存在一些问题
• 我们需要对泛型进行约束来解决这些问题

Bug

当前的泛型使用当中存在着一些问题,有时候就算使用泛型推断也无法得出正确的结果,需要通过接口推断

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



// 通用的方法
// function getLength<T>(arr: Array<T>): Array<T> {
//   console.log(arr.length); 
//   return arr;
//  }
 

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

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

getLength("孟子义");
getLength([1, 2, 3]);
getLength({length: 20});

3.泛型接口

• 将泛型与接口结合起来使用，可以大大简化我们的代码，增加我们的代码可读性
• 泛型也可以使用默认值

export default {}


// interface IPerson {
//   name: string
//   sex: string
// }

// let p: IPerson = {
//   name: "于文文",
//   sex: "女"
// }

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

// let p: IPerson<String, number> = {
//   name: "于文文",
//   sex: 0
// }


interface IPerson<T1=String, T2=number> {
  name: T1
  sex: T2
}

let p: IPerson = {
  name: "于文文",
  sex: 0
}

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

• 一个泛型被另一个泛型约束, 就叫做泛型约束中使用类型参数
• 你可以声明一个类型参数，且它被另一个类型参数所约束。 比如，现在我们想要用属性名从对象里获取这个属性。并且我们想要确保这个属性存在于对象 obj上，因此我们需要在这两个类型之间使用约束

function getProperty<T, K extends keyof T>(obj: T, key: K) {
 return obj[key];
}

let x = { a: 1, b: 2};
getProperty(x, "a"); 
// getProperty(x, "c");  // 报错