typescript箭头函数参数_TypeScript入门-函数

TypeScript 函数

和 javaScript 一样 , TypeScript 函数可以创建有名字的函数和匿名函数。 你可以随意选择适合应用程序的方式, 无论是定义一系列API函数还是只使用一次的函数。

创建函数的方式

和 javaScript 一样 ,TypeScript 也可以创建 带有名字的函数和匿名函数。

通过函数声明创建 带有名字的函数

通过函数表达式创建匿名函数

// Named function

function add(x , y){

return x + y;

}

// Anonymous function

let myadd = function(x , y){}

复制代码

函数类型

让我们为上面那个函数添加类型:

function add(x : number , y : number) : number{

return x + y;

}

复制代码

可选参数和默认参数

简短地说 , 传递给一个函数的参数个数必须与函数期望的参数个数一致。

function buildName(firstName : string , lastName : string){

return firstName + ' ' + lastName;

}

let res1 = buildName('1','2','3'); // 报错

let res2 = buildName('1'); // 报错

复制代码

javaScript 里 , 每个参数都是可选的 , 可传可不传。 没传参的时候 , 它的值就是 undefined。 在 TypeScript 里我们可以在参数名旁使用 ? 实现可选参数的功能。

function buildName(firstName : string , lastName ?: string){

return firstName + ' ' + lastName;

}

let res = buildName('1','2')

复制代码

可选参数必须跟在 必须参数后面。 如果上例我们想让 firstName 是可选的 , 那么就必须调整他们的位置。

在TypeScript 里 ,我们也可以为参数提供了一个默认值 ,当用户没有传递这个参数或者传递的值是 undefined 时 , 又叫做默认初始化值的参数。

剩余参数

必要参数 , 默认参数和可选参数都有个共同点 : 他们表示某一个参数。 有时 , 你想同时操作多个参数 , 或者你并不知道会有多少参数传递进来。 在 js 里 , 你可以使用 arguments 来访问所有传入的参数。

在 TypeScript里 ,你可以把所有参数收集到一个变量里

function buildName(firstName : string , ...restOfName : Array){

return firstName + ' ' + restOfName.join(' ');

}

let res = buildName('zs','hw');

复制代码

this

由于 TypeScript 是 javaScript 的超集 , ts 程序员也需要清楚 this 工作机制并且当有 bug 的时候能够找出错误所在。

this 和 箭头函数

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

console.log("card: " + pickedCard.card + " of " + pickedCard.suit);

复制代码