美文网首页
【第6篇】TypeScript函数function的案例代码详解

【第6篇】TypeScript函数function的案例代码详解

作者: 爱学习的蹭蹭 | 来源:发表于2019-06-08 19:27 被阅读0次

    1、最简单function函数

    • Ts代码
    /*******声明一个add方法********/
function add(x: number, y: number): number {
    return x+y;
}
/*******声明一个myAdd1方法********/
var myAdd1 = function(x: number, y: number): number { 
    return x+y; 
};

/*******声明一个myAdd2方法********/
//现在我们已经输入的功能，让我们写了完整类型的功能出来
//通过查看每件功能类型。
var myAdd2: (x:number, y:number)=>number = function(x: number, y: number): number {
    return x+y;  
};
var number3=myAdd2(1,3);
$(function () { 
    var number1=add(1,2);
    var number2=myAdd1(1,2);
    $("#msg1").html("<span style='color:red;'>"+number1+"</span>");
    $("#msg2").html("<span style='color:red;'>"+number2+"</span>");
    $("#msg3").html("<span style='color:red;'>"+number3+"</span>");
});
    • Js 代码
    /*******声明一个add方法********/
function add(x, y) {
    return x + y;
}

/*******声明一个myAdd1方法********/
var myAdd1 = function (x, y) {
    return x + y;
};

/*******声明一个myAdd2方法********/
//现在我们已经输入的功能，让我们写了完整类型的功能出来
//通过查看每件功能类型。
var myAdd2 = function (x, y) {
    return x + y;
};
var number3 = myAdd2(1, 3);
$(function () {
    var number1 = add(1, 2);
    var number2 = myAdd1(1, 2);
    $("#msg1").html("<span style='color:red;'>" + number1 + "</span>");
    $("#msg2").html("<span style='color:red;'>" + number2 + "</span>");
    $("#msg3").html("<span style='color:red;'>" + number3 + "</span>");
});
    • Html 代码
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script src="../test-1.js" type="text/javascript"></script>
</head>
<body>
<div id="msg1"></div>
<br/>
<div id="msg2"></div>
<br/>
<div id="msg3"></div>
</body>

    2、函数其余的参数

    • Ts文件
    /**
 * 一、function没有返回值，却返回了,虽然在写function的的时候不报错，
* 调用的时候就报Error
 * 不像JavaScript中，在打字稿每参数的函数被假定为所要求的功能。
 * 这并不意味着它不是一个“空”值，
 * 而是，当函数调用编译器将检查该用户已经提供了对每个参数的值。
 * 编译器还假定这些参数是将被传递给函数的唯一参数。
 * 总之，参数的函数的数目必须匹配的参数的函数需要的数量。
 */
function buildName1(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
//var result1 = buildName1("Bob");  //error, too few parameters
//var result2 = buildName1("Bob", "Adams", "Sr.");  //error, too many parameters
//var result3 = buildName1("Bob", "Adams");  //ah, just right

/**
 * Rest parameters
 * 其余的参数
 * 在JavaScript中，每一个参数被认为是可选的，用户可以不用管它，
 * 因为他们认为合适的。当他们这样做，他们认为是不确定的。
 *我们可以通过使用得到打字稿这个功能'？“旁边的参数，我们想要可选。
//例如，我们说，我们要的姓氏是可选：
 */
function buildName2(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

var result1 = buildName2("Bob");  //works correctly now
//var result2 = buildName2("Bob", "Adams", "Sr.");  //error, too many parameters
var result3 = buildName2("Bob", "Adams");  //ah, just right
/**
 * 必需，可选和默认参数都有一个共同点：他们大约在同一时间谈论一个参数。
* 有时候，你想与多个参数的工作作为一个群体 或者你可能不知道有多少参数的函 数将最终取,
//在JavaScript中，你可以使用的参数变量，它是每一个函数体中可见
 * 在TypeScript：您可以收集这些参数汇集成一个变量
 */
function buildName3(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
var employeeName = buildName3("Joseph", "Samuel", "Lucas", "MacKinzie");
/**
 * Rest parameters
 * 其余的参数都被视为可选参数无边号码。你可能会离开他们，或者你想要的。
 * 编译器将建立你的下省略号（...）
 * 后给予的名称传递给函数的参数数组，允许你使用它在你的函数
 */
function buildName4(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
var buildNameFun: (fname: string, ...rest: string[])=>string = buildName4;
    • JS 代码
    /**
 * 一、function没有返回值，却返回了,虽然在写function的的时候不报错，调用的时候就报Error
 * 不像JavaScript中，在打字稿每参数的函数被假定为所要求的功能。这并不意味着它不是一个“空”值，
 * 而是，当函数调用编译器将检查该用户已经提供了对每个参数的值。编译器还假定这些参数是将被传递给函数的唯一参数。
 * 总之，参数的函数的数目必须匹配的参数的函数需要的数量。
 */

function buildName1(firstName, lastName) {
    return firstName + " " + lastName;
}

//var result1 = buildName1("Bob");  //error, too few parameters
//var result2 = buildName1("Bob", "Adams", "Sr.");  //error, too many parameters
//var result3 = buildName1("Bob", "Adams");  //ah, just right

/**
 * Rest parameters
 * 其余的参数
 * 在JavaScript中，每一个参数被认为是可选的，用户可以不用管它，因为他们认为合适的。当他们这样做，他们认为是不确定的。
 * 我们可以通过使用得到打字稿这个功能'？“旁边的参数，我们想要可选。例如，我们说，我们要的姓氏是可选：
 */
function buildName2(firstName, lastName) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

var result1 = buildName2("Bob"); //works correctly now
//var result2 = buildName2("Bob", "Adams", "Sr.");  //error, too many parameters
var result3 = buildName2("Bob", "Adams"); //ah, just right
/**
 * 必需，可选和默认参数都有一个共同点：他们大约在同一时间谈论一个参数。有时候，你想与多个参数的工作作为一个群体
 * 或者你可能不知道有多少参数的函数将最终取,在JavaScript中，你可以使用的参数变量，它是每一个函数体中可见
 * 在TypeScript：您可以收集这些参数汇集成一个变量
 */
function buildName3(firstName) {
    var restOfName = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        restOfName[_i - 1] = arguments[_i];
    }
    return firstName + " " + restOfName.join(" ");
}
var employeeName = buildName3("Joseph", "Samuel", "Lucas", "MacKinzie");
/**
 * Rest parameters
 * 其余的参数都被视为可选参数无边号码。你可能会离开他们，或者你想要的。编译器将建立你的下省略号（...）
 * 后给予的名称传递给函数的参数数组，允许你使用它在你的函数
 */
function buildName4(firstName) {
    var restOfName = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        restOfName[_i - 1] = arguments[_i];
    }
    return firstName + " " + restOfName.join(" ");
}
var buildNameFun = buildName4;

    3、函数this关键字

    • Ts 代码
    **
 * this的使用..
 *在 JavaScript，this的变量一个函数被调用的变量。这使得它成为非常强大和灵活的功能，
 *但它是在总是具有了解，一个功能被执行的情况下的成本。这可以是出了名的混乱，例如，当一个函数被用作一个回调。
 */
function getMeMsg1():void{ 
    var suits1=["hearts", "spades", "clubs", "diamonds"];
    var deck1 = {
        suits:suits1,
        cards: Array(52),
        createCardPicker: function() {
            return function() {
                var pickedCard = Math.floor(Math.random() * 52);
                var pickedSuit = Math.floor(pickedCard / 13);
                return {suit: this.suits[pickedSuit], card: pickedCard % 13};
            }
        }
    }

    var cardPicker1 = deck1.createCardPicker();
    var pickedCard1 = cardPicker1();
    alert("card1: " + pickedCard1.card + " of " + pickedCard1.suit);
}
/**
 * 我们可以通过确保修复此功能被绑定到正确的'this'之前，我们返回函数供以后使用。这样一来，
 * 不管如何其以后使用时，它仍可以看到原来的“甲板”对象
 * 为了解决这个问题，我们切换函数表达式使用lambda语法（（）=>{}），而不是JavaScript函数表达式。
 * 这将自动捕捉“这个”可被创建，而不是被调用时，它的功能时：
 */
function getMeMsg2():void{  
    var deck2 = {
        suits: ["hearts", "spades", "clubs", "diamonds"],
        cards: Array(52),
        createCardPicker: function() {
            //使用lambda表达式去捕捉this用法.
            return () => {
                var pickedCard = Math.floor(Math.random() * 52);
                var pickedSuit = Math.floor(pickedCard / 13);
                console.log(this.suits[pickedSuit]);
                console.log(pickedCard % 13);
                return {suit: this.suits[pickedSuit], card: pickedCard % 13};
            }
        }
    }
    var cardPicker2 = deck2.createCardPicker();
    var pickedCard2 = cardPicker2();
    alert("card2: " + pickedCard2.card + " of " + pickedCard2.suit);
}
$(function(){ 
    getMeMsg2();
});
    • Ts编译成的js代码
    /**
 * this的使用..
 *在 JavaScript，this的变量一个函数被调用的变量。这使得它成为非常强大和灵活的功能，
 *但它是在总是具有了解，一个功能被执行的情况下的成本。这可以是出了名的混乱，例如，当一个函数被用作一个回调。
 */
function getMeMsg1() {
    var suits1 = ["hearts", "spades", "clubs", "diamonds"];
    var deck1 = {
        suits: suits1,
        cards: Array(52),
        createCardPicker: function () {
            return function () {
                var pickedCard = Math.floor(Math.random() * 52);
                var pickedSuit = Math.floor(pickedCard / 13);
                return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
            };
        }
    };
    var cardPicker1 = deck1.createCardPicker();
    var pickedCard1 = cardPicker1();
    alert("card1: " + pickedCard1.card + " of " + pickedCard1.suit);
}

/**
 * 我们可以通过确保修复此功能被绑定到正确的'this'之前，我们返回函数供以后使用。这样一来，
 * 不管如何其以后使用时，它仍可以看到原来的“甲板”对象
 * 为了解决这个问题，我们切换函数表达式使用lambda语法（（）=>{}），而不是JavaScript函数表达式。
 * 这将自动捕捉“这个”可被创建，而不是被调用时，它的功能时：
 */

function getMeMsg2() {
    var deck2 = {
        suits: ["hearts", "spades", "clubs", "diamonds"],
        cards: Array(52),
        createCardPicker: function () {
            var _this = this;
            //使用lambda表达式去捕捉this用法.
            return function () {
                var pickedCard = Math.floor(Math.random() * 52);
                var pickedSuit = Math.floor(pickedCard / 13);
                console.log(_this.suits[pickedSuit]);
                console.log(pickedCard % 13);
                return { suit: _this.suits[pickedSuit], card: pickedCard % 13 };
            };
        }
    };
    var cardPicker2 = deck2.createCardPicker();
    var pickedCard2 = cardPicker2();
    alert("card2: " + pickedCard2.card + " of " + pickedCard2.suit);
}

$(function () {
    getMeMsg2();

});

    4、Any与Void函数

    • Ts代码
    /**
 *JavaScript是本质上是一种非常好的动态的语言。这并意味都通用的一个JavaScript函数返回基于对传入的参数的形状不同类型的对象。
 */
var suits = ["hearts", "spades", "clubs", "diamonds"];
//--实例一
function getThisMsgs1():void{ 
        function pickCard1(x): any {
        // 判断这个x是不是object/array
        if (typeof x == "object") {
            var pickedCard = Math.floor(Math.random() * x.length);
            return pickedCard;
        }
        //  判断
        else if (typeof x == "number") {
            var pickedSuit = Math.floor(x / 13);
            return { suit: suits[pickedSuit], card: x % 13 };
        }
    }

    var myDeck1 = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
    var pickedCard1 = myDeck1[pickCard1(myDeck1)];
    alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
    var pickedCard2 = pickCard1(15);
    alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
    }

//--实例二
function getThisMsgs2():void{  
    function pickCard(x: {suit: string; card: number; }[]): number;
    function pickCard(x: number): {suit: string; card: number; };
    function pickCard(x): any {
        // Check to see if we're working with an object/array
        // if so, they gave us the deck and we'll pick the card
        if (typeof x == "object") {
            var pickedCard = Math.floor(Math.random() * x.length);
            return pickedCard;
        }

        // Otherwise just let them pick the card
        else if (typeof x == "number") {
            var pickedSuit = Math.floor(x / 13);
            return { suit: suits[pickedSuit], card: x % 13 };
        }
    }
   
    var myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
    var pickedCard1 = myDeck[pickCard(myDeck)];
    alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
    var pickedCard2 = pickCard(15);
    alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
}
$(function(){ 
    getThisMsgs2();   
});
    • Ts编译成js代码
    /**
 *
 *JavaScript是本质上是一种非常好的动态的语言。这并意味都通用的一个JavaScript函数返回基于对传入的参数的形状不同类型的对象。
 */
var suits = ["hearts", "spades", "clubs", "diamonds"];
//--实例一

function getThisMsgs1() {
    function pickCard1(x) {
        // 判断这个x是不是object/array
        if (typeof x == "object") {
            var pickedCard = Math.floor(Math.random() * x.length);
            return pickedCard;
        }

        else if (typeof x == "number") {
            var pickedSuit = Math.floor(x / 13);
            return { suit: suits[pickedSuit], card: x % 13 };
        }
    }

    var myDeck1 = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
    var pickedCard1 = myDeck1[pickCard1(myDeck1)];
    alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
    var pickedCard2 = pickCard1(15);
    alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
}

//--实例二
function getThisMsgs2() {
    function pickCard(x) {
        // Check to see if we're working with an object/array
        // if so, they gave us the deck and we'll pick the card
        if (typeof x == "object") {
            var pickedCard = Math.floor(Math.random() * x.length);
            return pickedCard;
        }
        else if (typeof x == "number") {
            var pickedSuit = Math.floor(x / 13);
            return { suit: suits[pickedSuit], card: x % 13 };
        }
    }

    var myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
    var pickedCard1 = myDeck[pickCard(myDeck)];
    alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
    var pickedCard2 = pickCard(15);
    alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);
}
$(function () {
    getThisMsgs2();
});
    • html代码
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../plugins/jquery-2.1.4.min.js"></script>
<script src="../test-3.js" type="text/javascript"></script>
<script src="../test-4.js" type="text/javascript"></script>
</head>
<body>
<div id="msg1"></div>
<br/>
<div id="msg2"></div>
<br/>
<div id="msg3"></div>
</body>
</html>

    工程源代码

    TypeScript函数function的案例代码详解

    博客所有文章是本人2014年撰写,而GItHub的源代码是有些是2014年与2015年进行整理，由于在2013年项目接触TypeScript，同时在当年接触KendoUI开发的时候TypeScript的影子，故一年后决定把官方文档所有API文档认真琢磨了一遍，并且撰写成一本最全的中文TypeScript入门指南详解案例教程与代码,当初的下载量还是比较高的。由于最近接触Kotlin，自从学习TypeScript，它的语法对我后面学习Kotlin有了极大的帮助，个人感觉，它的语法跟ActionScript，Swift写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。

    相关文章

      网友评论

          本文标题：【第6篇】TypeScript函数function的案例代码详解

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|【第6篇】TypeScript函数function的案例代码详解|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！