【typescript基础篇】(第六章) 泛型

泛型的基本使用

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

泛型约束

  • 在TS中,我们需要严格的设置各种类型,我们使用泛型之后,将会变得更加灵活,但同时也将会存在一些问题
  • 我们需要对泛型进行约束来解决这些问题
typescript 复制代码
// 演示可能出现的问题
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});

泛型接口

  • 将泛型与接口结合起来使用,可以大大简化我们的代码,增加我们的代码可读性
  • 泛型也可以使用默认值
typescript 复制代码
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
}

泛型类

  • 泛型类看上去与泛型接口差不多。 泛型类使用( <>)括起泛型类型,跟在类名后面。
typescript 复制代码
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, "女")
const p2 = new Person<String, number>("虞书欣", 18, "女")
const p3:Person<String, number> = new Person("刘诗诗", 18, "女")

使用类型参数进行约束

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

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

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

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


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");  // 报错
相关推荐
Zacks_xdc12 分钟前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|20 分钟前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊23 分钟前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之1 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin111 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
蔗理苦2 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro3 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹3 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript