如何为TypeScript内联匿名箭头函数指定返回类型

你完全可以直接给内联匿名箭头函数显式指定返回类型，不需要仅依赖变量类型声明，具体有三种常用的实现方式：

1. 直接给箭头函数本身标注返回类型 #

在箭头函数的参数闭合括号后、箭头符号前加冒号，后跟你要指定的返回类型即可，示例如下：

// 同时指定入参类型和返回类型
const otherTypeArr = myTypeArr.map((o: MyType): OtherType => ({
  bar: o.foo
}));

这种写法下，即使你不为接收变量otherTypeArr显式声明类型，TypeScript 也能自动推断出它的类型是OtherType[]，而且在你写函数体的过程中就会实时校验返回值是否符合OtherType的要求。

2. 给接收变量声明类型 #

也就是你目前在用的写法：

const otherTypeArr: OtherType[] = myTypeArr.map(o => ({bar: o.foo}));

TypeScript 会基于变量的类型声明反向校验回调函数的返回值是否符合要求，这种写法在回调逻辑简短的场景下更简洁。

3. 指定map方法的泛型参数 #

你还可以通过指定数组map方法的泛型参数，间接约束回调的返回类型：

// 显式指定map返回的数组元素类型为OtherType
const otherTypeArr = myTypeArr.map<OtherType>(o => ({
  bar: o.foo
}));

这种写法下不需要单独给回调的入参和返回值标类型，TypeScript 会自动完成入参类型推断和返回值校验，是实际开发中非常常用的写法。

不同写法的适用场景 #

• 回调逻辑简短、上下文清晰的场景：推荐使用「给接收变量声明类型」或者「指定map泛型参数」的写法，代码更简洁
• 回调逻辑复杂、代码行数多的场景：推荐直接给箭头函数本身指定返回类型，这样你在编写函数体的过程中就能实时得到类型校验提示，不需要等到赋值阶段才发现类型错误

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