TypeScript 11 泛型约束(高级)

168 阅读2分钟

1 . 泛型 :

泛型是在保证类型安全的前提下 ,让函数等与多种类型一起工作 , 从而实现复用 ,常用于 :函数 、接口 、class中。

2 . 泛型函数 :

  • 在声明时 ,在函数名称后面 添加尖括号 <> , 在尖括号里面指定具体的类型
  • 调用时 ,在尖括号里面写入要用的类型
function id<Type>(value : Type) : Type {
     return value
}

const num = id<number>(10) ;
const str = id<string>('a') ;

让函数可以与多种不同的类型一起工作 , 实现了复用的同时保证了类型安全 。

注意 : 调用时如果不写 尖括号 ,TS 能自动推断出类型 ,只不过推断出来的为字面量类型!!!

3 . 泛型约束 :

3 . 1 添加更加具体的类型 :

0422.png

如上图 写成 Type[ ] , 把参数约束为数组 ,如果不加 ,就用不了 value . length 这个方法 !!!

3 . 2 用extends添加约束 :

interface ILength { length : number }
function id < Type extends ILength > ( value : Type) : Type {
   console . log (value . length)
   return value
}

注意 : 此处的 extends 不是继承的意思 ,在此处意为 Type 类型必须有 ILength 类型的属性 !!! 即传入的类型必须有 length 属性 。

3 . 3 类型变量之间的相互约束 :

例如 : 创建一个函数来获得一个对象中的属性值 :

0423.png

keyof 关键字 后面跟一个对象类型 ,生成一个由其键名称组成的(字符串或数字)联合类型(字面量常量组成的联合类型) 。 如上 :即为 ' name ' | ' age ' 。

  • 可以理解为 Key 可以是 Type 所有键(属性名)中的任意一个 。

注意 :

  • keyof 后面也可以跟 数值、字符串 、数组等等 ,那么返回的就是封装的方法所组成的联合类型 。
  • 此处约束关键字 extends ,如果其后跟的是一个对象类型 , 则表明被约束的类型得具有该对象的属性和方法 ; 如果其后跟的是联合类型 , 则表明被约束的类型只能是是联合类型中的任意一个 。