📌  相关文章
📜  TypeScript箭头函数

📅  最后修改于: 2021-01-11 12:42:30             🧑  作者: Mango

TypeScript箭头函数

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

箭头函数的动机是：

  • 当我们不需要保持输入函数。
  • 它从词法上捕获了此关键字的含义。
  • 它从字面上捕获了参数的含义。

句法

我们可以将Arrow函数的语法分为三部分：

  • 参数：一个函数可能有也可能没有参数。
  • 箭头表示法/ lambda表示法(=>)
  • 语句：它表示函数的指令集。
(parameter1, parameter2, ..., parameterN) => expression;

如果使用粗箭头(=>)表示法，则无需使用函数关键字。参数在方括号()中传递，函数表达式包含在大括号{}中。

有两种以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

输出：

没有参数的箭头函数

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

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

输出：

在arrow函数，如果函数主体仅包含一个语句，则不需要花括号和return关键字。我们可以从以下示例中了解它。

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

输出：

类中的箭头函数

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

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

输出：