在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
▓▓▓▓▓▓ 大致介绍TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用。TypeScript中的函数也包括JavaScript中最常见的两种函数 function add(x,y){ return x + y; } let add = function(x,y){ return x + y; }
▓▓▓▓▓▓ 函数类型可以像变量一样为函数定义类型 function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x+y; };
函数的完整类型 let add: (x: number,y: number) => number = function(x: number,y: number): number { return x + y}; 完整的函数类型太过麻烦,推荐还是写简单的,而且如果函数没有返回值,最好设置为void,不要留空
▓▓▓▓▓▓ 可选参数和默认参数注意:在TypeScript中传递给一个函数的参数个数必须与函数期望的参数个数一致。 function buildName(firstName: string, lastName: string) { return firstName + " " + lastName; } let result1 = buildName("Bob"); // error let result2 = buildName("Bob", "Adams", "Sr."); // error let result3 = buildName("Bob", "Adams");
可选参数应该可以猜到,没错,就是使用? function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; } let result1 = buildName("Bob"); // works correctly now let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters let result3 = buildName("Bob", "Adams"); // ah, just right
默认参数都是老套路 function buildName(firstName: string, lastName = "Smith") { return firstName + " " + lastName; } let result1 = buildName("Bob"); let result2 = buildName("Bob", undefined); let result3 = buildName("Bob", "Adams", "Sr."); // error, too many parameters let result4 = buildName("Bob", "Adams");
▓▓▓▓▓▓ 剩余参数有时,你想同时操作多个参数,或者你并不知道会有多少参数传递进来。 在JavaScript里,你可以使用arguments来访问所有传入的参数。 在TypeScript里,你可以把所有参数收集到一个变量里: function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
你也可以操作这个变量 function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;
▓▓▓▓▓▓ thisthis是JavaScript中的难点之一,看看下面的代码 let deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function() { return function() { let pickedCard = Math.floor(Math.random() * 52); let pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; } } } let cardPicker = deck.createCardPicker(); let pickedCard = cardPicker(); alert("card: " + pickedCard.card + " of " + pickedCard.suit);
你的答案是什么? 答案是报错!这时因为deck.createCardPicker()返回一个函数赋值给cardPicker,而cardPicker是以函数式的方式调用的,所以this指向window。之所以这样是因为在JavaScript中this是在被调用时确定的,而在TypeScript中可以将this设置为在函数定义时就确定,方法就是把函数表达式变为使用lambda表达式( () => {} ) let deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function() { // NOTE: the line below is now an arrow function, allowing us to capture 'this' right here return () => { let pickedCard = Math.floor(Math.random() * 52); let pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; } } } let cardPicker = deck.createCardPicker(); let pickedCard = cardPicker(); alert("card: " + pickedCard.card + " of " + pickedCard.suit);
这样就没有问题了
参考资料: TypeScript Handbook(中文版) |
请发表评论