美文网首页H5我爱编程
TypeScript 泛型-泛型类型

TypeScript 泛型-泛型类型

作者: sunxiaochuan | 来源:发表于2018-01-07 16:08 被阅读1610次

    源码

    • ts
    //声明一个泛型类型的函数
    function  Hello<T>(arg:T):T {
        return arg;
    }
    //声明一个方法该方法引用上面的泛型类型的函数
    let myHello:<T>(arg:T) => T = Hello;
    alert(myHello('xiaochuan'));
    
    • HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TypeScript 泛型-泛型类型</title>
    </head>
    <body>
        <script type="text/javascript" src="GenericsDemo.js"></script>
    </body>
    </html>
    
    • 浏览器效果图
    image.png

    扩展

    • Lam.ts
    //简单的解释 => 表达式
    //myFunc 函数名称  +  参数类型  + 返回值类型
    //后面是定义这个函数的内容  参数必须是 number 类型 返回值也必须是 string 类型
    // let myFunc:(a:number) => string = function(a:number):string{
    //  return 'hello' + a;
    // }
    //实际上在后面定义函数实际内容的时候其本身就有 函数检查  所以其实可以将这个函数写成如下所示的样子
    let myFunc = function(a:number):string{
        return 'hello' + a;
    }
    alert(myFunc(2));
    
    • HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TypeScript 泛型-泛型类型</title>
    </head>
    <body>
        <!-- <script type="text/javascript" src="GenericsDemo.js"></script> -->
        <script type="text/javascript" src="Lam.js"></script>
    </body>
    </html>
    
    • 浏览器效果图
    image.png

    使用另一种方法实现示例一的功能

    • ts
    // //声明一个泛型类型的函数
    function  Hello<T>(arg:T):T {
        return arg;
    }
    // //声明一个方法该方法引用上面的泛型类型的函数
    // let myHello:<T>(arg:T) => T = Hello;
    // alert(myHello('xiaochuan'));
    
    
    //使用另一种写法实现上面的定义
    let myHello:{<T>(arg:T):T} = Hello;
    alert(myHello('xiaochuan'));
    
    • HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TypeScript 泛型-泛型类型</title>
    </head>
    <body>
        <script type="text/javascript" src="GenericsDemo.js"></script>
        <!-- <script type="text/javascript" src="Lam.js"></script> -->
    </body>
    </html>
    
    • 浏览器效果图
    image.png

    下面是在接口中泛型的使用

    • ts
    //下面是在接口中对泛型的使用
    //定义一个有一个泛型函数的接口
    interface Hello{
        //定义一个泛型的函数
        <T>(arg:T):T;
    }
    //声明一个泛型函数
    function myHello<T>(arg:T):T{
        return arg;
    }
    //声明一个引用 Hello 接口类型的函数 函数的值引用 myHello 函数
    let MH:Hello = myHello;
    // alert(MH('xiaochuan'));//这样并没有用到泛型
    //下面是使用泛型的好处的实现
    alert(MH<string>('xiaochuan'));
    
    • HTML 与上例一致
    • 浏览器效果图
    image.png

    下面是在接口中对泛型使用的另一种写法

    • ts
    //下面是在接口中对泛型使用的另一种写法
    //在接口定义的时候就指定其为泛型
    interface Hello<T>{
        (arg:T):T;
    }
    //声明一个泛型函数
    function myHello<T>(arg:T):T{
        return arg;
    }
    //声明一个引用自接口且为 number 类型的函数
    let mh:Hello<number> = myHello;
    //这样的话这个参数就只能是 number 类型
    alert(mh(29));
    
    • HTML 与上例相同
    • 浏览器效果图
    image.png

    相关文章

      网友评论

        本文标题:TypeScript 泛型-泛型类型

        本文链接:https://www.haomeiwen.com/subject/ysaunxtx.html