示例:
// 泛型接口:在定义接口时, 为接口中的属性或方法定义泛型类型,在使用接口时, 再指定具体的泛型类型
(() => {
// 需求:定义一个类,用来存储用户的相关信息(id,名字,年龄)
// 通过一个类的实例对象调用add方法可以添加多个用户信息对象,调用getUserId方法可以根据id获取某个指定的用户信息对象
// 定义一个泛型接口
interface IBaseCRUD<T> {
data: Array<T>
add: (t: T) => T
getUserId: (id: number) => T
}
// 定义一个用户信息的类
class User {
id?: number // 用户的id ? 代表该属性可有可无
name: string // 用户的姓名
age: number // 用户的年龄
constructor(name: string, age: number) {
this.name = name
this.age = age
}
}
// 定义一个类,可以针对用户的信息对象进行增加及查询的操作
class UserCRUD implements IBaseCRUD<User> {
// 用来保存多个User类型的用户信息对象
data: Array<User> = []
//方法用来存储用户信息对象的
add(user: User): User {
// 产生id
user.id = Date.now() + Math.random()
// 把用户信息对象添加到data数组中
this.data.push(user)
return user
}
}
// 实例化添加用户信息对象的类UserCRUD
const userCRUD: UserCRUD = new UserCRUD()
userCRUD.add(new User('jack', 20))
userCRUD.add(new User('tom', 25))
// 使用 const { id: rawId } 从 add 方法返回的 User 对象中提取 id 属性,并将其赋值给变量 rawId。
// 这里的 id: rawId 表示将对象中的 id 属性赋值给变量 rawId,即 rawId 存储了新添加用户的 id 值。
const { id: rawId } = userCRUD.add(new User('lucy', 23));
const id = Number(rawId); // 尝试将id转换为number类型
userCRUD.add(new User('rousi', 21))
console.log(userCRUD.data)
})()
const { id: rawId } = userCRUD.add(new User('lucy', 23));
- 解构赋值:这行代码使用了解构赋值语法。解构赋值是一种从对象或数组中提取特定属性或元素并将其赋值给变量的便捷方式。在这里,它是从对象中提取属性。
- 函数调用:
userCRUD.add(new User('lucy', 23))
是一个函数调用。userCRUD
是一个类UserCRUD
的实例,add
方法是UserCRUD
类中定义的方法,用于添加用户信息对象。这里创建了一个新的User
实例new User('lucy', 23)
作为参数传入add
方法,该User
实例代表一个名为lucy
,年龄为23
的用户。 - 方法返回值与解构:
add
方法返回一个User
对象,该对象包含了添加到系统中的用户信息,其中就包括自动生成的id
属性(在add
方法内部通过user.id = Date.now() + Math.random();
生成)。使用const { id: rawId }
从add
方法返回的User
对象中提取id
属性,并将其赋值给变量rawId
。这里的id: rawId
表示将对象中的id
属性赋值给变量rawId
,即rawId
存储了新添加用户的id
值。
const id = Number(rawId);
- 类型转换:这行代码使用
Number
函数将rawId
转换为数字类型。Number
是 JavaScript 中的一个内置函数,用于将各种类型的值转换为数字类型。在前面的代码中,rawId
存储的是add
方法生成的id
,由于user.id = Date.now() + Math.random();
这种生成方式,rawId
可能是一个字符串形式或者其他非数字类型的值(尽管逻辑上它代表一个唯一标识,更希望是数字类型),通过Number(rawId)
将其转换为真正的数字类型,并将转换后的结果赋值给变量id
。这样做的目的是为了让id
的类型符合后续代码中可能对其进行的操作要求,比如在userCRUD.getUserId(id)
方法调用中,getUserId
方法可能期望接收一个数字类型的id
参数。