泛型指使用时才定义类型，即类型可以像参数一样定义，主要解决类、接口、函数的复用性，让它们可以处理多种类型。
基本使用
下面示例返回值类型是 any，这不是我们想要的，因为我们想要具体返回类型
function dump(arg: any) {
return arg;
}
let hj = dump('hj') // 类型为 any
let hk = dump(true) // 类型为 any
使用了泛型定义后，返回值即为明确的类型
function dump<T>(arg: T): T {
return arg;
}
let hj = dump<string>('hj') // 类型为 string
如果调用时不指定类型系统也会自动推断类型
...
let hk = dump(true) // 类型为 boolean
...
类型继承
- 下面的代码是不严谨的，我们不需要处理数字，因为数字没有 length 属性，同时我们希望返回类型不是 any
const getLength = (args: any) => {
return args.length
}
console.log(getLength('hj')); // 2
console.log(getLength([1, 2, 3])); // 3
console.log(getLength(123)); // undefined
- 泛型是不确定的类型，所以下面读取 length 属性将报错
const getLength = <T>(args: T): number => {
return args.length // 类型“T”上不存在属性“length”
}
我们可以通过继承来解决这个问题
const getLength = <T extends string>(args: T): number => {
return args.length
}
- 上例只能处理字符串，不能处理数组等包含 length 的数据，我们可以通过继承 extends 继承，让泛型定义包含 length 属性
const getLength = <T extends {
length: number }>(args: T): number => {
return args.length
}
// 或使用 interface 或 type
type LengthType = {
length: number }
function getLengthAttribute<T extends LengthType>(args: T): number {
return args.length;
}
- 如果你的类型只是字符串或数组，也可以使用联合类型
const getLength = <T extends string | any[]>(args: T): number => {
return args.length
}
类
下面我们来掌握在类中使用泛型的方法
使用泛型复用类
下面是对数值与字符串类型的集合进行管理，因为业务是一样的，所以下面的实现是重复的
class CollectionNumber {
data: number[] = []
public push(...items: number[]) {
this.data.push(...items)
}
public shift() {
return this.data.shift()
}
}
class CollectionString {
data: string[] = []
public push(...items: string[]) {
this.data.push(...items)
}
public shift() {
return this.data.shift()
}
}
const numberCollection = new CollectionNumber()
numberCollection.push(1)
const stringCollection = new CollectionString()
stringCollection.push('hj', 'hk')
console.log(stringCollection.shift());
上例使用泛型来控制就好多了
class Collection<T> {
data: T[] = []
public push(...items: T[]) {
this.data.push(...items)
}
public shift() {
return this.data.shift()
}
}
const collections = new Collection<number>()
collections.push(1)
type User = {
name: string, age: number }
const hj: User = {
name: "hj", age: 18 }
const userCollection = new Collection<User>()
userCollection.push(hj)
console.log(userCollection.shift());
接口结合泛型
下面的代码是不稳定的，我们的意图是传递用户数据，但没有类型约束情况下，可以传递任何类型
class User {
constructor(protected _user) {
}
public get() {
return this._user
}
}
const instance = new User({
name: 'hj' })
console.log(instance.get());
对类使用泛型处理后，可以保证传递与返回值的类型，并具有良好的代码提示
class User<T> {
constructor(private _user: T) {
this._user = _user
}
public get user(): T {
return this._user
}
}
interface UserInterface {
name: string
age: number
}
const hj = new User<UserInterface>({
name: 'hj', age: 19 })
console.log(hj.user); // { name: 'hj', age: 19 }
接口
下面对接口的类型使用泛型定义，比如 isLock 可以为 number 或boolean，并对文章的评论内容进行定义。
这样处理代码会有严格类型约束，并有良好的代码提示
interface ArticleInterface<T, B> {
title: string
canComment: B
comments: T[]
}
type CommentType = {
comment: string
}
const hj: ArticleInterface<CommentType, boolean> = {
title: 'generics',
canComment: true,
comments: [
{
comment: '真棒' }
]
}
console.log(hj);
值类型
下面解构得到的变量类型不是具体类型，而是数组类型，比如变量 y 的类型是 string | (() => void)
这在写项目时是不安全的，因为可以将 y 随时修改为字符串，同时也不会有友好的代码提示
function hj() {
let a = 'hj'
let b = (x: number, y: number): number => x + y
return [a, b]
}
const [x, y] = hj() // 变量 y 的类型为 string | (() => void)
使用 as const 就可以很高效的解决上面的问题，可以得到具体的类型，来得到更安全的代码，同时会有更好的代码提示
const hj = () => {
let a = 'hj'
let b = (): void => {
}
return [a, b] as const
}
const [x, y] = hj() // 变量 y 的类型为 () => void
也可以使用泛型来得到具体的值类型
const func = <T extends any[]>(...args: T): T => {
return args;
}
const hj = () => {
const a: string = 'hj'
const b: number = 2090
return func(a, b)
}
const [r, e] = hj()