TypeScript箭头函数三种类型注解写法的差异解析

这三种写法最终实现的功能完全一致——都是定义一个接收两个number类型参数、返回number类型结果的加法函数，但类型注解的位置和方式存在差异，具体如下：

1. 变量层面指定函数类型 #

const addTwoVariable: (a: number, b: number) => number = (a, b) => {
    return a + b;
}

• 核心是给变量addTwoVariable直接定义了完整的函数类型，等号右侧的箭头函数无需额外写参数和返回值类型。
• TypeScript会自动根据左侧的类型要求，对右侧函数做类型推断和校验，确保右侧函数的参数、返回值类型与左侧匹配。
• 适合需要复用某个函数类型的场景，比如提前定义类型别名后复用：

  type AddFunc = (a: number, b: number) => number;
  const add: AddFunc = (a, b) => a + b;
  

2. 函数实现层面添加注解 #

const anotherAddTwoVariable = (a: number, b: number): number => {
    return a + b;
}

• 直接在箭头函数的参数列表和返回值位置添加类型注解，变量的类型会自动从右侧函数的实现中推断出来。
• 这是日常开发中最常用的写法，简洁直观，不需要额外的类型声明，直接在实现时明确类型。

3. 变量与函数实现重复注解 #

const ultimateAddTwoVariable: (a: number, b: number) => number = (a: number, b: number): number => {
  return a + b;
}

• 这种写法同时给变量和右侧箭头函数都添加了完整的类型注解，属于冗余写法。
• 只要其中一边的类型注解明确，TypeScript就能完成类型校验，两边重复写不会提升类型安全性，反而增加了代码维护成本，完全没必要使用。

总结 #

三种写法在类型安全和功能上完全等价，差异仅在于类型注解的位置和冗余度：

• 优先使用第二种写法，简洁高效；
• 当需要复用函数类型时，选择第一种写法；
• 第三种写法属于冗余操作，不推荐使用。

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