10_TypeScript中的泛型
TypeScript中的泛型)
一、泛型的定义
**泛型:**软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性,组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
在像 C# 和 Java 这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。这样用户就可以已自己的数据类型来使用组件。
通俗理解:泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持
二、泛型函数
// 只能返回string 类型的数据
function getData(value: string):string {
return value
}
//同时返回 string 类型和number 类型,代码冗余
function getData1(value: string):string {
return value
}
function getData2(value: number):number {
return value
}
// 同时返回 string 类型和number 类型, any 可以解决这个问题,但是相当于放弃了类型检查.
function getData3(value: any):any {
return value
}
需求: 传入什么就返回什么类型。 any 实现的时候传入和返回可以不一样的类型,此时我们可以使用泛型来解决。any 的性能比泛型差
function getData<T>(value:T):T {
return value
}
// console.log(getData<number>('13')) // 错误写法
console.log(getData<number>(123)) // 正确写法
console.log(getData<string>('123')) // 正确写法
三、泛型类:比如有个最小堆算法,需要同时支持返回数字和字符串两种类型。通过类的泛型来实现
只能传入数字类型
class MinClass {
list:number[] = [];
add(num: number) {
this.list.push(num)
}
min():number {
let minNum = this.list[0]
this.list.forEach(el=>{
if(el<minNum) {
minNum = el
}
})
console.log(minNum)
return minNum
}
}
var m = new MinClass()
m.add(2)
m.add(28)
m.add(-2)
m.add(22)
m.add(92)
console.log(m.min())
类的泛型,传入和返回的一致
class MinClass<T> {
list:T[] = [];
add(num: T):void {
this.list.push(num)
}
min():T {
let minNum = this.list[0]
this.list.forEach(el=>{
if(el<minNum) {
minNum = el
}
})
console.log(minNum)
return minNum
}
}
var m = new MinClass<number>() // 实例化类,并且指定了类的 T 代表的类型是number
m.add(2)
m.add(28)
m.add(-2)
m.add(92)
console.log(m.min())
泛型的好处: 首先是有类型校验,其次是能够实现传入什么返回什么。
四、泛型接口
// 函数类型接口
interface ConfigFn{
(value: string, value2:string):string
}
var setData:ConfigFn = function(val:string, val2:string):string {
return val+val2
}
setData('name', 'lisi')
第一种定义泛型接口
interface ConfigFn{
<T>(value: T):T
}
var setData:ConfigFn= function<T>(val:T):T {
return val
}
setData<string>('name')
setData<number>(12334)
第二种定义泛型接口
interface ConfigFn<T>{
(value: T):T
}
function setData<T>(val:T):T {
return val
}
var mySetData:ConfigFn<string> = setData;
mySetData('name') // 正确写法
mySetData(12334) // 错误写法
五、泛型类 --扩展 把类作为参数类型的泛型类
泛型类:泛型可以帮助我们避免重复的代码以及对不特定数据类型的支持(类型校验),下面我们看看把类当作参数的泛型类
1、定义个类
2、把类作为参数来约束数据传入的类型
1、实现:定义一个 User 的类,这个类的作用就是映射数据库字段,然后定义一个 MysqlDb 的类,这个类用于操作数据库,然后把 User 类作为参数传入到 MysqlDb 中
var user = new User({
username: "zhangsan",
password: "a123456"
})
var Db = new MysqlDb()
Db.add(user)
// 把类作为参数来约束
class User{
username: string|undefined;
passwrod: string|undefined
}
class MysqlDb{
list:User[] = []
add(user: User):boolean{
this.list.push(user)
return true
}
}
let u = new User()
u.username = 'lis'
u.passwrod = '123456'
let Db = new MysqlDb()
Db.add(u)
动态的校验 MysqlDb 类
// 操作数据库的泛型类
class MysqlDb<T>{
list:T[] = []
add(user: T):boolean{
this.list.push(user)
return true
}
}
// 1、定义一个 User 类 和数据库进行映射
class User{
username: string|undefined;
passwrod: string|undefined
}
let u = new User()
u.username = 'lisisi'
u.passwrod = '123456'
//let Db = new MysqlDb()// 这种方法是有问题的,能够传入任意的类型,没有做校验
let Db = new MysqlDb<User>() // 这种方法可以正常校验
Db.add(u)
class ArticelCate{
title: string|undefined;
desc: string|undefined;
status: number | undefined
constructor(params:{
title: string|undefined,
desc: string|undefined,
status: number | undefined
}) {
this.title = params.title
this.desc = params.desc
this.status = params.status
}
}
let article = new ArticelCate({
title: '今日新闻',
desc: "1233",
status: 1
})
let Db2 = new MysqlDb<ArticelCate>()
Db.add(article)
原文地址:https://blog.csdn.net/qq_46143850/article/details/140501803
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!