为何PHPStorm提示‘await对该表达式类型无影响’？

我的PHPStorm编辑器提示‘await对该表达式类型无影响’，但代码运行正常，请问这是什么原因？相关代码如下：

export const fetchBoards = (): AppThunk =>
  async function (dispatch): Promise<void> {
    try {
      const { boards }: { boards: IBoardItem[] } = await api.get('/board');
      dispatch({ type: 'UPDATE_BOARDS', payload: boards });
      window.console.log('Success');
    } catch (e) {
      window.console.error(e);
      dispatch({ type: 'ERROR', payload: e });
    }
  };
export const addBoard = (board: { title: string }): AppThunk =>
  async function (dispatch): Promise<void> {
    try {
      const res = await api.post('/board', board);
      window.console.log(res);

      window.console.log('Before');
      await dispatch(fetchBoards()); // 'await' has no effect on the type of this expression
      window.console.log('After');
    } catch (e) {
      window.console.error(e);
      const res = dispatch({ type: 'ERROR', payload: e });
    }
  };

核心原因 #

这个提示是TypeScript类型定义与运行时实际值不匹配导致的：

• 你的fetchBoards声明返回AppThunk类型，但当前AppThunk的类型定义中，dispatch调用thunk后返回的并非Promise，而是同步的Action类型。
• 但实际运行时，fetchBoards内部是异步函数，dispatch(fetchBoards())会返回这个异步函数的执行结果——也就是Promise<void>，所以await能正常生效，代码运行逻辑不受影响。
• PHPStorm基于TypeScript的静态类型检查规则判断，它识别不到dispatch返回的是Promise，因此提示“await对该表达式类型无影响”。

解决办法 #

1. 修正AppThunk的类型定义 #

如果使用Redux Toolkit，正确的AppThunk类型应能正确推断异步thunk的返回值为Promise，示例定义如下：

import { ThunkAction } from '@reduxjs/toolkit';
import { RootState, AppDispatch } from './store';

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

修正后，dispatch(thunk)的返回值会被正确识别为Promise，IDE的提示会自动消失。

2. 显式断言返回值类型（临时方案） #

如果暂时不想修改全局类型定义，可以通过类型断言告诉IDE当前表达式返回的是Promise：

await dispatch(fetchBoards()) as Promise<void>;

3. 根据业务逻辑调整await的使用 #

如果你的业务逻辑不需要等待fetchBoards执行完成再运行后续代码，可以直接移除await；但如果要保证Before→fetchBoards执行完成→After的顺序，这个await必须保留，此时优先推荐修正类型定义。

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