如何推斷 typescript 中返回類型的泛型參數

Question

我有一個類型

export type AppThunk<ReturnType> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

現在如果我使用它如下

export const loadCourse = (id: string): AppThunk => {
  return (dispatch: Dispatch) => {
    dispatch(loadCourseSuccess(undefined));
    return api
      .getCourse(id)
      .then((course) => dispatch(loadCourseSuccess(course)));
  };
};

typescript 編譯器抱怨並告訴我在 AppThunk 中提供泛型參數，如何使其自動推斷泛型返回類型參數？

Answer 1

這里有三個不同的問題：

• TS中如何正確定義和使用泛型參數
• 如何正確定義和使用AppThunk類型
• 如何在這里推斷出正確的返回類型

現在，您的AppThunk類型期望它必須被賦予一個通用參數ReturnType 。 因此，您必須將其用作AppThunk<TheActualReturnType> - 在這種情況下，類似於AppThunk<Promise<void>> ，因為您並沒有真正從最終的.then()中返回任何內容。

我們通常建議為AppThunk類型賦予 `ReturnType 的默認值，因為許多 thunk 實際上並不返回任何內容，例如：

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

這樣，您可以將其用作AppThunk ，而無需指定返回類型。

最后......使用AppThunk的方式，我不認為它可以立即推斷出這里的返回類型，因為你告訴TS 這個 function 的類型是什么。

Answer 2

如果您的目標是為 thunk 參數提供通用類型，但允許操作創建者推斷其返回類型，您可以使用幫助程序 function 來實現：

export type AppThunk = ThunkAction<
  unknown,
  RootState,
  unknown,
  Action<string>
>;

export function enforceThunkType<T extends AppThunk>(thunk: T) {
  return thunk;
};
 
// explicitly types dispatch
// while still infering the return type
export const loadCourse = (id: string) => {
  return enforceThunkType((dispatch) => {
    dispatch(loadCourseSuccess(undefined));
    return api
      .getCourse(id)
      .then((course) => dispatch(loadCourseSuccess(course)));
  });
};

靈感來自/取自這篇文章