Typescript - 泛型

Posted 2022-01-22 cc-freiheit

原文：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‘);