Typescript-泛型

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

原文：TypeScript基本知识点整理

零、序言

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

一、泛型函数

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

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 转换成指定的类型。

二、泛型类

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

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 泛型的案例：

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

三、泛型接口

第一种形式：

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'))

第二种形式：

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