TypeScript中await Promise返回值报Object is of type 'unknown'错误

问题表现 #

使用createAsyncThunk封装Redux异步逻辑时，await请求函数拿到结果后访问属性触发TS报错，错误码ts(2571)，提示内容为：

const response: unknown Object is of type 'unknown'

问题复现代码：

export function fetchCount(amount: number) {
  return new Promise(resolve => setTimeout(() => resolve({ data: amount }), 500));
}

export const incrementAsync = createAsyncThunk('counter/fetchCount', async (amount: number) => {
  const response = await fetchCount(amount);
  return response.data; // 此处response标红报错
});

报错本质：TypeScript无法推断await fetchCount()的返回值类型，默认将其判定为unknown类型，而TS不允许直接访问unknown类型值的属性。

报错原因 #

fetchCount函数返回Promise时，没有显式声明resolve回调传入值的类型，TS无法从代码上下文推导Promise的最终返回值结构，因此将其类型标记为unknown，该问题和createAsyncThunk本身的类型定义无关。

解决方法 #

方案1（推荐）：显式声明Promise的泛型类型 #

给Promise传入对应泛型参数，明确告知TS resolve值的结构，从根源补全类型定义：

// 定义接口描述返回值结构
interface CountResponse {
  data: number;
}

export function fetchCount(amount: number) {
  // 传入泛型，声明Promise最终返回CountResponse类型
  return new Promise<CountResponse>(resolve => setTimeout(() => resolve({ data: amount }), 500));
}

export const incrementAsync = createAsyncThunk('counter/fetchCount', async (amount: number) => {
  const response = await fetchCount(amount);
  // TS可正确推导response为CountResponse类型，访问data属性无报错
  return response.data;
});

方案2：临时类型断言（不推荐） #

如果不方便修改原请求函数的定义，可以在拿到返回值时通过类型断言手动指定类型，该方式会跳过TS的静态类型校验，存在类型不匹配的隐患：

export const incrementAsync = createAsyncThunk('counter/fetchCount', async (amount: number) => {
  // 手动断言返回值类型
  const response = await fetchCount(amount) as { data: number };
  return response.data;
});

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