TypeScript 箭头函数

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

箭头函数的动机是：

当我们不需要反复键入 function 关键字时。
它词法地捕获了 this 关键字的含义。
它词法地捕获了 arguments 的含义。

语法

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

参数： 函数可以有或没有参数。
箭头符号/lambda 符号： (=>)
语句： 它代表函数的指令集。

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

如果我们使用 fat arrow (= >)符号，就不需要使用 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)); //returns 50

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

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

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

输出:

TypeScript 箭头函数

没有参数的箭头函数

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

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

输出：

TypeScript 箭头函数

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 箭头函数