TypeScript Learning 5 - 泛型

泛型从字面理解,就是宽泛类型的约束。官文中写的是对组件的复用、扩展的体现,因为一个组件不可能只支持现有的数据,还要考虑支持未来的新数据。在使用过程中,泛型也简化了函数重载,对js这种函数天生就是重载的语言来说,ts的重载看着就麻烦~

引出泛型

1
2
3
function demo1 (arg: number): number {
return arg
}

上面的函数支持number,如果我们要是让它在支持string`array`等,就得在改写一下:

1
2
3
function demo1 (arg: any): any {
return arg
}

上面的做法可以解决问题,但是不完美,它会丢失一些信息

比如:你传了一个number,返回string也是可以的

如果用重载解决,如下:

1
2
3
4
5
function demo1 (arg: string): string 
function demo1 (arg: number):number
function demo1 (arg): any {
return arg
}

每支持一种类型就得手动添加,而我们只是想传入的和返回的要保持类型一致,并且实现简单,这时泛型的作用就显现出来了,我们用泛型重新改写上面的例子:

1
2
3
function demo1 <U>(arg: U): U {
return arg
}

使用的时候有两种:

1
2
3
4
5
// 第一种.
let res = demo1<number>(123)

// 第二种(类型推导).
let res = demo1(123)

泛型类型

泛型类型主要是在函数、类、接口三方面,函数已经在上面提过了,下面是类和接口的例子:

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
// 接口.
interface Demo2 {
<U>(arg: U): U
}

// 对所有成员进行限制.
interface Demo2<U> {
(arg: U): U
}


let demo2: Demo2 = function<T>(arg: T): T {
return arg
}

// 泛型类.
class Demo<U> {
name: string
sayHello: (theName: U) => U
}

let d = new Demo<string>()
d.name = 'w3ctalk'
d.sayHello = function (theName) {
return 'hello ' + theName
}

泛型约束

这个是我看了半天最明白也是最费解的地:

  • 最明白就是我知道它要做啥,无非就是在给泛型价格紧箍
  • 最费解就是他这个示例代码,看着除了死记,没什么说的。。

直接把官方例子摆这吧,以后用到了,也许会有其他的理解

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
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key]
}

let x = { a: 1, b: 2, c: 3, d: 4 }

getProperty(x, 'a') // okay
getProperty(x, 'm') // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.

// 使用类来约束.
class BeeKeeper {
hasMask: boolean
}

class ZooKeeper {
nametag: string
}

class Animal {
numLegs: number
}

class Bee extends Animal {
keeper: BeeKeeper
}

class Lion extends Animal {
keeper: ZooKeeper
}

function createInstance<A extends Animal>(c: new () => A): A {
return new c()
}

createInstance(Lion).keeper.nametag // typechecks!
createInstance(Bee).keeper.hasMask // typechecks!

这个学习过程最无聊,最没劲,最费时间!!!你要大量的理解记忆,然后就搞成文档了~
后面等用了,才知道坑吧~

欢迎留言讨论 ^_^ ~