TypeScript箭头函数用法详解 – TypeScript开发教程 typescript箭头函数|TypeScript

上一章TypeScript教程请查看：TypeScript函数使用详解
ES6版本的TypeScript提供了一个箭头函数，它是定义匿名函数的简写语法，用于函数表达式，它省略了function关键字。我们可以称它为胖箭头(因为->是一个细箭头，而=>是一个“胖”箭头)，它也被称为Lambda函数，箭头函数具有“this”关键字的词法作用域。
箭头函数的目的是:

当我们不需要继续输入功能。
它从词汇上捕捉这个关键字的含义。
它从词汇上抓住了参数的意义。

语法
我们可以把一个箭头函数的语法分为三部分:

参数: 函数可以有参数，也可以没有参数。
箭头符号/lambda符号(=>)
语句: 它表示函数的指令集。

(parameter1, parameter2, ..., parameterN) => expression;

如果我们使用胖箭头(=> )表示法，就不需要使用function关键字。参数在方括号()中传递，函数表达式括在大括号{}中。
在ES5和ES6风格的代码中有两种编写函数的方法。

// ES5: 没有箭头函数 var getResult = function(username, points) { return username + ' scored ' + points + ' points!'; }; // ES6: 箭头函数 var getResult = (username: string, points: number): string => { return `${ username } scored ${ points } points!`; }

带参数的箭头函数下面的程序是一个带有参数的箭头函数示例。

et sum = (a: number, b: number): number => { return a + b; } console.log(sum(20, 30)); //returns 50

【TypeScript箭头函数用法详解 – TypeScript开发教程】在上面的例子中，sum是一个箭头函数，“a: number, b: number”是参数类型，“:number”是返回类型，箭头符号=> 分隔了函数参数和函数体。
编译上述TypeScript程序后，对应的JavaScript代码为:

let sum = (a, b) => { return a + b; }; console.log(sum(20, 30)); //returns 50

没有参数的箭头函数
下面的程序是一个没有参数的箭头函数示例。

let Print = () => console.log("Hello srcmini!"); Print();

在箭头函数中，如果函数体只包含一条语句，则不需要大括号和return关键字。我们可以从下面的例子中理解它。

let sum = (a: number, b: number) => a + b; console.log("SUM: " +sum(5, 15));

类中的箭头函数我们可以将箭头函数作为一个属性包含在类中。下面的示例有助于更清楚地理解它。

class Student { studCode: number; studName: string; constructor(code: number, name: string) { this.studName = name; this.studCode = code; } showDetail = () => console.log("Student Code: " + this.studCode + '\nStudent Name: ' + this.studName) } let stud = new Student(101, 'La Oreja'); stud.showDetail();