▓▓▓▓▓▓ 大致介绍
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;
▓▓▓▓▓▓ this
this是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(中文版)