泛型

泛型，最简单的理解：泛指的类型。（类似函数中的形参与实参）

函数中的泛型使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function join(first: string | number, second: string | number) {
  return `${first}${second}`
}
join('jspang', 1); // 如果我想第一个参数是字符串，第二个也必须是字符串，这么就用到泛型


// 泛型使用，如同定义形参，在调用时指定类型
function join<JSPang>(first: JSPang, second: JSPang) {
  return `${first}${second}`
}

join<string>('jspang', '123');
join<number>(11, 22);

// 泛型中数组的使用
function myFun<ANY>(params:ANY[]) { // ANY[] or Array<ANY>
  return params
}
myFun<string>(['a', 'b'])


// 两个类型参数的使用（工作中，常用T表示泛型）
function join2<T,P>(first: T, second: P) {
  return `${first}${second}`
}

join2<string,number>('jspang', 123);
join2<number, string>(11, '22');
join2(11, '22'); // 泛型也支持类型推断 （鼠标移到函数名有提示）

class类中使用泛型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class SelectGirl {
  constructor(private girls: string[] | number[]) { } // private 私有的参数，外部无法修改
  getGirl(index: number): string | number {
    return this.girls[index]
  }
}

// 使用泛型
class SelectGirl<T> {   // 泛型的约束: <T extends number | string>
  constructor(private girls: T[]) { } // private 私有的参数，外部无法修改
  getGirl(index: number): T {
    return this.girls[index]
  }
}

// const selectGirl = new SelectGirl<string>(['大脚', 'xiaohong', 'xiaobai'])
const selectGirl = new SelectGirl<number>([101, 102, 103])
console.log(selectGirl.getGirl(1))


// 泛型中的继承
interface Girl {
  name: string
}
class SelectGirl2<T extends Girl> { // 泛型T中必须有一个name属性，继承自Girl接口
  constructor(private girls: T[]) { } // private 私有的参数，外部无法修改
  getGirl(index: number): string {
    return this.girls[index].name
  }
}

const selectGirl2 = new SelectGirl2([
  {name: '大脚1'},
  {name: '大脚2'},
  {name: '大脚3'}
])

console.log(selectGirl2.getGirl(1))