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