『TypeScript』箭头函数

2,569 阅读1分钟

箭头函数

JavaScriptTypeScript 里,我们会经常遇到不需要给函数命名的情况,尤其是在需要将一个函数作为参数传给另外一个函数的时候。 这时,我们会创建 匿名函数 。 因为这些函数不会在其他地方复用,所以我们不需要给它们命名。

这种情况下,我们通常会使用以下语法:

const myFunc = function() {
    const myVar = "value";
    return myVar;
}

ES6 提供了其他写匿名函数的方式的语法糖。 你可以使用 箭头函数

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

当不需要函数体,只返回一个值的时候 ,箭头函数允许你省略 return 关键字和外面的大括号。 这样就可以将一个简单的函数简化成一个单行语句。

const myFunc = () => "value";

这段代码默认会返回字符串 value

带参数的箭头函数

和一般的函数一样,你也可以给箭头函数传递参数。

JavaScript:

const doubler = (item) => item * 2;
doubler(4);

TypeScript:

const doubler = (item: number) => item * 2;
doubler(4);

doubler(4) 将返回 8

如果箭头函数只有一个参数,则可以省略参数外面的括号。

const doubler = item => item * 2;

注:TypeScript 里如果要进行类型注解的话,是不可以省略括号的,如省略了括号的话,则不进行类型注解,默认为 any 类型

可以给箭头函数传递多个参数。

JavaScript:

const multiplier = (item, multi) => item * multi;
multiplier(4, 2);

TypeScript:

const multiplier = (item: number, multi: number) => item * multi;
multiplier(4, 2);

multiplier(4, 2) 将返回 8