TypeScript箭头函数用法详解

您所在的位置：网站首页 › 函数定义中没有对参数指定类型 › TypeScript箭头函数用法详解

TypeScript箭头函数用法详解

2023-07-31 09:37| 来源: 网络整理| 查看: 265

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

【本文地址】

TypeScript箭头函数用法详解

TypeScript箭头函数用法详解

今日新闻

推荐新闻