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

7.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>

</html>

7.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;

/**

* 一、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;

7.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();

});

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();

});

<!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>

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-11-10 15:01:44

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

【第7篇】TypeScript泛型的案例代码详解

8.1最简单泛型例子 Ts代码 /** * 没有泛型,我们要么必须给身份功能的特定类型 */ function identity1(arg: number): number { return arg; } /** * 或者:我们可以描述使用"任意"类型的标识功能: */ function identity2(arg: any): any { return arg; } Js文件 /** * 没有泛型,我们要么必须给身份功能的特定类型 */ function identity1(arg)

【第8篇】TypeScript的Mixin案例代码详解

9.1Mixin使用 Ts代码 /** * Mixin使用. * *随着传统的面向对象的层次结构,从可重用的组件建立类的另一种流行的方式是通过简单的组合部分类来构建他们. *你可能熟悉混入或性状比如Scala语言的理念,模式也达到了JavaScript的一些社区人气 */ // Disposable Mixin(一次性) class Disposable { isDisposed: boolean; dispose() { this.isDisposed = true; } } // Activ

jQuery选择器代码详解（七）——elementMatcher函数

要读懂Sizzle的Compile执行过程,首先需要弄清楚涉及的各个子程序的功能和关键变量和作用,我将逐一对jQuery-1.10.2版本的Compile代码进行说明,望能给予大家帮助. elementMatcher(matchers) 1.源码 function elementMatcher(matchers) { return matchers.length > 1 ? function(elem, context, xml) { var i = matchers.length; while

jQuery选择器代码详解（八）——addCombinator函数

function addCombinator(matcher, combinator, base) 1.源码 function addCombinator(matcher, combinator, base) { var dir = combinator.dir, checkNonElements = base && dir === "parentNode", doneName = done++; return combinator.first ? // Check a

指针数组，数组指针，指针函数，函数指针，二级指针详解

先看个简单的:char *p,这定义了一个指针,指针指向的数据类型是字符型,char  *(p)定义了一个指针P: char *p[4], 为指针数组,由于[]的优先级高于*,所以p先和[]结合,p[]是一个数组,暂时把p[]看成是q,也就是char *(q),定义了一个指针q,只不过q是一个数组罢了,故定义了一个数组,数组里面的数据是char *的,所以数组里面的数据为指针类型.所以char *p[4]是四个指针,这四个指针组成了一个数组,称为指针数组,既有多个指针组成的数组. char(*p

JS中的定时函数(setTimeout,clearTimeout,setInterval,clearInterval详解 )

设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout("alert('ok')",5000); 方法二: window.setTimeout(function() { alert("Ok"); }, 5000); 方法三: function showAlert() { alert("ok"); } window.s

赋值运算符函数的返回值类型详解

在c++赋值运算符函数的学习中,对于返回值类型的问题,一直非常费解,今天彻底总结一些每种不同返回值类型的结果: 1.当返回值为空时: <span style="font-size:14px;">void hasptr::operator=(const hasptr& s)</span> 这个时候如果只有一个'='(a = b)运算那就没问题,但是如果存在'='(a = b = c)的链式操作时,编译器就会报错 我们看:a = b = c: 程序会先运行

（转载）--SG函数和SG定理【详解】

在介绍SG函数和SG定理之前我们先介绍介绍必胜点与必败点吧. 必胜点和必败点的概念: P点:必败点,换而言之,就是谁处于此位置,则在双方操作正确的情况下必败. N点:必胜点,处于此情况下,双方操作均正确的情况下必胜. 必胜点和必败点的性质: 1.所有终结点是 必败点 P .(我们以此为基本前提进行推理,换句话说,我们以此为假设) 2.从任何必胜点N 操作,至少有一种方式可以进入必败点 P. 3.无论如何操作,必败点P 都只能进入 必胜点 N. 我们研究必胜点和必败点的目的时间为题进行简化,有助于

Akka第一个案例动手实战main方法实现中ActorSystem等代码详解

学习了Akka第一个案例动手实战main方法实现中ActorSystem等代码详解,创建ActorSystem实例,用acterOf创建MasterActor,用tell的方式给MasterActor发信息,睡眠一段时间给MasterActor发信息,处理完后关闭,资源回收. 案例如下: public static void main(String[] args) throws Exception{ ActorSystem_system =  ActorSystem.create("HelloA