TypeScript中双箭头函数类型（含Observable）的含义解析

先明确你给出的代码：

const loadData: (detailsStore: RecipeDetailsStore) => (source$: Observable<string>) => Observable<RecipeDetails>

你的第一种理解完全正确：

• loadData 是一个函数，它接受**RecipeDetailsStore类型**的参数detailsStore
• 执行loadData(detailsStore)后，会返回一个新的函数
• 这个返回的函数接受**Observable<string>类型的参数source$，执行后最终返回Observable<RecipeDetails>类型**的值

为什么不是第二种理解？ #

你提到的第二种理解搞反了类型约束的逻辑：TypeScript中const 变量: 类型的语法，是用冒号右侧的类型来定义左侧变量的类型。这里冒号右侧的(detailsStore: RecipeDetailsStore) => (source$: Observable<string>) => Observable<RecipeDetails>本身就是一个函数类型——描述的就是“接受RecipeDetailsStore参数，返回另一个函数”的函数，这正是loadData的类型。

双重箭头的优先级逻辑 #

TypeScript里箭头函数的类型定义是右结合的，也就是说：

A => B => C

等价于：

A => (B => C)

而非(A => B) => C。所以你可以给原代码加上括号来明确结构：

const loadData: (detailsStore: RecipeDetailsStore) => ((source$: Observable<string>) => Observable<RecipeDetails>)

这样就能更直观地看到，loadData的返回值是另一个完整的函数类型。

实际实现示例 #

为了更清晰，这里给出一个符合该类型的loadData实现：

// 假设RecipeDetailsStore有fetchRecipe方法，接受ID并返回Observable<RecipeDetails>
const loadData: (detailsStore: RecipeDetailsStore) => (source$: Observable<string>) => Observable<RecipeDetails> = (detailsStore) => {
  return (source$) => {
    return source$.pipe(
      switchMap(recipeId => detailsStore.fetchRecipe(recipeId))
    );
  };
};

使用时的流程是：

const store = new RecipeDetailsStore();
// 先传入store，得到处理source$的函数
const processRecipeSource = loadData(store);
// 传入ID的Observable，得到RecipeDetails的Observable
const recipe$ = processRecipeSource(of('recipe-001'));

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