typescript - typescript 中函数的 ' : ' 和 ' => ' 有什么区别？

Question

假设我们使用这样的显式类型定义一个函数，

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

如您所见，我们应该在此处使用“=>”，但我们不能在函数声明中使用这个粗箭头。

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

但在 lambda 函数中，例如我们使用 '=>' 这个粗箭头，为什么？

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

以及在函数类型接口(interface)中我们使用它的原因，例如，我们使用“:”冒号。

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

这整个困惑是关于什么的？

Answer 1

这两种语法表示的内容(函数的返回值)没有区别，但一般来说，:语法用于函数声明和=> 语法用于函数表达式。 (阅读 Javascript function declarations vs function operators 了解这两者之间的区别。)

冒号语法至少可以追溯到废弃的 EcmaScript 4 规范，该规范引入了使用此语法的类型注释。箭头语法来自 arrow function expression在 EcmaScript 6 中使用粗箭头符号作为函数“关键字”。箭头语法为使用冒号会产生歧义的地方提供了简写，在这些情况下通常更容易直观地解析。

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

// 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 中的工作方式，总是可以对任何函数类型使用冒号语法，但并非总是可以使用箭头语法。最重要的是编写清晰易读的代码，因此使用最适合这种情况的语法。通常这意味着使用 => 作为回调参数，使用 : 作为其他参数。