TypeScript中两种函数类型声明语法(a: string) => void与(a: string): void的区别是什么？

刚接触TypeScript的时候，我也觉得这俩写法只是箭头函数和普通函数的语法区别，能随便互换——直到编译器多次亮红报错，才搞清楚它们各自有严格的适用场景，下面就把这些场景掰碎了说：

1. 类型别名/接口里的不同用法 #

在定义类型别名或者接口时，两种写法都能生效，但侧重不同：

• (a: string) => void是函数类型字面量，适合用来定义一个独立的函数类型：

  type StringLogger = (a: string) => void;
  

• (a: string): void更偏向方法签名，常用来描述对象里的方法：

  interface Logger {
    log(a: string): void; // 这是接口的方法签名
    log2: (a: string) => void; // 这是接口里的函数属性
  }
  

  你也可以用对象包裹的形式把方法签名转成类型别名：type StringLogger2 = { (a: string): void };，效果和StringLogger一致，但写法更偏向方法风格。

2. 变量的函数类型标注 #

当你给一个变量直接标注函数类型时，只能用(a: string) => void：

// ✅ 完全合法
const printString: (a: string) => void = (str) => {
  console.log(str);
};

// ❌ 编译器直接报错，这种写法不能用来标注变量类型
const printString2: (a: string): void = (str) => {
  console.log(str);
};

3. 函数重载必须用方法签名 #

写函数重载的时候，只能用(a: string): void这种方法签名的形式，箭头语法在这里完全不适用：

// ✅ 正确的重载写法
function processData(input: string): void;
function processData(input: number): number;
function processData(input: string | number) {
  if (typeof input === 'string') {
    console.log(input);
  } else {
    return input * 2;
  }
}

// ❌ 语法错误！重载不能用箭头语法
function processData(input: string) => void;

4. 构造函数类型的特殊用法 #

在描述构造函数类型时，会结合箭头语法，但这里的箭头是用来标注构造函数返回的实例类型：

type UserConstructor = new (name: string) => { name: string };
// 这里的`new (name: string) => ...`表示一个接受string参数、返回User对象的构造函数

总结一下：(a: string) => void是通用的函数类型字面量，主要用来标注变量、参数的函数类型；而(a: string): void是方法签名，专为接口、函数重载、对象方法定义设计，二者场景不同，千万不能随便混用！

内容的提问来源于stack exchange，提问作者Colambias