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  

在上面的例子中，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();