第二章，学习TypeScript泛型

一，函数泛型

我写了两个函数一个是数字类型的函数，另一个是字符串类型的函数,其实就是类型不同

实现的功能是一样的，这时候我们就可以使用泛型来优化

function num (a:number,b:number) : Array<number> {
    return [a ,b];
}

num(1,2)

function str (a:string,b:string) : Array<string> {
    return [a ,b];
}
str('独孤','求败')

泛型优化

语法为函数名后面跟一个 参数名可以随便写 例如我这儿写了T

当我们使用这个函数的时候把参数的类型传进去就可以了 （也就是动态类型）。

function Add<T>(a: T, b: T):  Array<T> {
    return [a,b]
}
Add<number>(1,2)
Add<string>('1','2')

我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以了。

function Sub<T,U>(a:T,b:U):Array<T|U> {
    const params:Array<T|U> = [a,b]
    return params
}
Sub<Boolean,number>(false,1)

二，定义泛型接口

声明接口的时候 在名字后面加一个<参数>，使用的时候传递类型

interface MyInter<T>{
    (arg:T):T
}

function fn<T>(arg:T):T{
    return arg
}

let result :MyInter<number> = fn

result(123)

 

三，对象字面量泛型

let foo :{<T>(arg:T):T}
foo = function<T>(arg:T):T{
    return arg
}
foo(123)

四，泛型约束

我们期望在一个泛型的变量上面，获取其length参数，但是，有的数据类型是没有length属性的。

function getLegnth<T>(arg:T) {
  return arg.length
}

定义的时候就会提示，类型T上不存在属性length,于是，我们就得对使用的泛型进行约束，我们约束其为具有length属性的类型，这里我们会用到interface,代码如下：

//泛型约束
interface Len {
    length:number
}
function getLength<T extends Len>(arg:T){
    return arg.length
}

getLength(1)

五，使用keyof约束对象 

其中使用了TS泛型和泛型约束，首先定义了T类型并使用extends关键字继承object类型的子类型。

 然后使用keyof操作符获取T类型的所有键它返回类型是联合类型，最后利用extends关键字约束K类型必须为keyof T联合类型的子类型。

function prop<T, K extends keyof T>(obj: T, key: K) {
   return obj[key]
}
 
 
let o = { a: 1, b: 2, c: 3 }
 
prop(o, 'a') 
prop(o, 'd') //此时就会报错发现找不到

上面函数的作用是：传入一个对象，和键值， 返回对应的value值，传入的obj是动态的，所以我们要将传入的obj定义为泛型。obj:T。

但是传入键值的时候，如果传一个不存在的key,那么返回的value肯定是不存在，会报错。所以我们需要用到keyof 来约束 键值k的传入类型。

上面例子，约束k的类型，即为a | b | c 联合类型。

六，泛型类

声明方法跟函数类似名称后面定义

使用的时候确定类型new Sub<number>()

class Sub<T>{
   attr: T[] = [];
   add (a:T):T[] {
      return [a]
   }
}
 
let s = new Sub<number>()
s.attr = [1,2,3]
s.add(123)
 
let str = new Sub<string>()
str.attr = ['1','2','3']
str.add('123')