打字稿中函数的':'和'=>之间有什么区别？

Question

让我们说我们使用这样的显式类型定义一个函数,

var func : (arg1: string, arg2: number) => boolean;

你可以看到我们应该在这里使用'=>',但我们不能在函数decleration中使用这个胖箭头.

func = function name(arg1: string, arg2: number) : boolean {return true;}

但是在lambda函数中我们使用'=>'这个胖箭为什么？

var lambdaFunc = (arg1: string, arg2: number) => true;

在函数类型接口中为什么我们使用它,例如,我们使用':'冒号.

interface SearchFunc {
(source: string, subString: string): boolean;
}

这整个混乱是什么意思？

Answer 1

两个语法表示的内容(函数的返回值)没有区别,但一般来说,:语法用于函数声明,=>语法用于函数表达式.(阅读Javascript函数声明与函数运算符,以概述这两者之间的区别.)

冒号语法至少可以追溯到废弃的EcmaScript 4规范,该规范使用此语法引入了类型注释.箭头语法来自EcmaScript 6中的箭头函数表达式,它使用胖箭头符号作为函数"keyword".箭头语法为使用冒号时存在歧义的地方提供了简写,并且在这些情况下通常更容易在视觉上进行解析.

例如,给定一个接受回调的函数,:如果没有用类型包装,用于表示回调的返回类型是不可能的{},但是很简单=>:

// ambiguous parse, syntax error
function sendString(callback: (value: string): void);

// valid, using fat arrow
function sendString(callback: (value: string) => void);

// same thing, using curly brackets
// (harder to write, harder to parse visually)
function sendString(callback: { (value: string): void; });

在类中,可以将胖箭头语法用于作为函数的类的属性,但不能用于方法,如本示例所示:

class Foo {
  // In TypeScript’s eyes, this is actually a
  // property, not a method!
  someMethod: (value: string) => boolean;
}

在这种情况下,TypeScript区分了类的属性和类的方法.定义为此类属性的函数不需要正文,但不能覆盖或定义为子类中的方法.换句话说,即使签名是"兼容的",也无法执行此操作:

class Bar extends Foo {
  // nope!
  someMethod(value: string): boolean {
    return true;
  }
}

总之,由于TypeScript语法在TypeScript中的工作方式,因此始终可以对任何函数类型使用冒号语法,但并不总是可以使用箭头语法.最重要的是编写清晰易读的代码,因此请使用最适合该情况的语法.通常这意味着使用=>回调参数,以及:其他所有内容.

Answer 2

假设我们使用显式类型定义一个函数，如下所示： var func : (arg1: string, arg2: number) => boolean; 正如你所看到的，我们应该使用 ' => '

这是一个简写。长手使用:：

var func : {(arg1: string, arg2: number): boolean;}

但是在 lambda 函数中，例如我们使用“=>”这个粗箭头，为什么呢？var lambdaFunc = (arg1: 字符串, arg2: 数字) => 布尔值;

不对。你还是用:这里吧。IE

var lambdaFunc = (arg1: string, arg2: number):boolean => true;

在函数类型接口中，为什么我们使用它，例如，我们使用“：”冒号。

确切地说，我们使用的:就像您在这里展示的其他示例一样。

简而言之

这种速记方式令人困惑且奇怪。不喜欢它？使用长手