本节课我们来开始了解
TypeScript
中泛型类型的概念和接口使用。
一.泛型类型
1.
前面,我们通过泛型变量的形式来存储调用方的类型从而进行检查;
2.
而泛型也可以作为类型的方式存在,理解这一点,先了解下函数的声明方式;
| |
| function info(name : string, age : number) : string { |
| return name + '的年龄为:' + age |
| } |
| |
| let info = function (name : string, age : number) : string { |
| return name + '的年龄为:' + age |
| } |
| |
| let info : (name : string, age : number) => string = function (name, age) { |
| return name + '的年龄为:' + age |
| } |
复制
PS
:匿名函数
2
的声明方式中的“
=>
”箭头函数,表示函数的返回类型;
3.
那么用泛型来表示上面的匿名函数,我们可以对照的样式来写;
| function info<T>(msg : T) : T { |
| return msg |
| } |
| |
| let myInfo : <T>(msg : T) => T = function (msg) { |
| return msg |
| } |
复制
PS
:变形到这里,你会发现
: <
T
>(
msg
:
T
)
这个就是类型了,即:泛型类型;
二.接口
1.
泛型不但可以作为类型来使用,还可以继续变形,用对象字面量的形式存在;
| |
| let myInfo2 : {<T>(msg : T) : T} = function (msg) { |
| return msg |
| } |
复制
PS
:如果用
{}
对象字面量方式,那么
=>
箭头函数就改成:冒号的对应语法即可;
2.
继续变形,泛型类型支持
{}
,那么就可以使用接口方式进行分离,有助于复用;
| |
| interface Iinfo { |
| <T>(msg : T) : T |
| } |
| let myInfo : Iinfo = function (msg) { |
| return msg |
| } |
| console.log(myInfo<string>('Mr.Lee')) |
| PS:当然,还可以变形,就是将<string>的类型参数通过 Iinfo<string>这样传递; |
| interface Iinfo<T> { |
| (msg : T) : T |
| } |
| let myInfo : Iinfo<string> = function (msg) { |
| return msg |
| } |
| console.log(myInfo('Mr.Lee')) |
复制