Typescript - 泛型

原文：TypeScript基本知识点整理

 

零、序言

　　很多时候，类型是写死的，不利于复用，泛型简单的理解就是声明时不设置具体类型，后期使用时再传入，解决类、接口、方法的复用性，以及对不特定数据类型的支持。

 

一、泛型函数

　　函数在调用时，指定泛型 T 的类型

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function f9<T>(value:T) : T {     //传入参数类型为T，返回值的类型也为T     console.log(`我传入了${value}`)     return value }   f9<number>(10)   function f10 <T> (value:T) : any {     //传入参数的类型为T，返回任意类型的值     console.log(`我返回了${value}`)     return `我返回了${value}` }   console.log(f10<string>('我是ljy'))

 　　这样方便的 地方在与：调用函数的时候， function f9<T>(value:T) : T   指定 <> 中的类型值后，编辑器就能把 value:T  以及返回值的 T 转换成指定的类型。

 

二、泛型类

　　泛型类，使用  <> 跟在类名后面

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

class Ni <T> {     name : T     constructor (name : T) {         this.name = name     }     say (value : T) : any {           return `${this.name}说${value}`     } }   const ni1 = new Ni<string>('ljy')//实例化类，指定类的类型是string console.log(ni1.say('你好'))   const ni2 = new Ni<number>(20)//实例化类，指定类的类型是number console.log(ni2.say(23))

 

　　顺便贴一个 java 中 ArrayList  泛型的案例：

?

1	List<String> stringArrayList = new ArrayList<String>();

 

三、泛型接口

第一种形式：

?

1 2 3 4 5 6 7 8 9

interface Niniubi {     <T> (value:T) : any }   let fff : Niniubi = <T>(value : T) : any => {     return `我传入了${value}` } console.log(fff<number>(25)) console.log(fff<string>('ljy'))

 

第二种形式：

?

1 2 3 4 5 6 7 8

interface ConfigFnTwo<T>{     (value:T):T; } function setDataTwo<T>(value:T):T{     return value } var setDataTwoFn:ConfigFnTwo<string> = setDataTwo setDataTwoFn('name');