TypeScript箭头函数

TypeScript的ES6版本提供了箭头函数，这是定义匿名函数的简写语法，即函数表达式。它省略了function关键字。我们可以称其为“胖箭头”（因为->是细箭头而=>是“胖”箭头）。它也被称为Lambda函数。箭头函数具有“this”关键字的词汇作用域。

箭头函数的动机是：

当我们不需要继续输入函数时。
它在词汇上捕获了关键字this的含义。
它在词汇上捕获了参数的含义。

语法

我们可以将箭头函数的语法分为三个部分：

参数：一个函数可能有也可能没有参数。
箭头符号/lambda符号（=>）
语句：表示函数的指令集。

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

如果我们使用胖箭头（= >）符号，则无需使用function关键字。参数传递在小括号()中，并且函数表达式在大括号{}内。

在ES5和ES6样式的编码中，有两种编写函数的方法。

// ES5: Without arrow function
var getResult = function(username, points) {
  return username + ' scored ' + points + ' points!';
};

// ES6: With arrow function
var getResult = (username: string, points: number): string => {
  return ` ${ username } scored$ { points } points!`;
}

带参数的箭头函数

以下程序是带参数的箭头函数示例。

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

在上面的示例中，sum是一个箭头函数，“a：number，b：number”是参数类型，“**: number**”是返回类型，箭头符号=>将函数参数和函数体分开。

编译上述TypeScript程序后，相应的JavaScript代码为：

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

输出：

TypeScript箭头函数

不带参数的箭头函数

以下程序是不带参数的箭头函数示例。

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

输出：

TypeScript箭头函数

在箭头函数中，如果函数主体仅由一条语句组成，则无需使用大括号和return关键字。我们可以从下面的示例中了解到它。

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

输出：

TypeScript箭头函数

类中的箭头函数

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

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, 'Abhishek Mishra');
stud.showDetail();

输出：

TypeScript箭头函数