如何在TypeScript异步函数中使用Awaited<T>解包Promise类型

我调用了一个嵌套返回Promise的异步函数，希望最终变量csvRows的类型是csvRow[]，但实际得到的是Promise<csvRow[]>。我知道Awaited<T>可以用来解包类型，但不知道该用在什么地方——是返回原始Promise的函数里？还是用async/await的函数里？或者其他位置？

类型定义 #

export type csvRow = { [level: string]: string }

export type csvType = {
  data: csvRow[]
}

问题代码 #

const parseFile = (file) => {
  return new Promise<csvRow[]>((resolve, reject) => {
    Papa.parse(file, {
      header: true,
      delimter: ',',
      download: true,
      skipEmptyLines: true,
      complete: (a: csvType) => {
        resolve(a.data)
      },
      error(err) {
        reject(err)
      }
    })
  })
}

export const useTimeSeriesData = async (): Promise<csvRow[]> => {
  let csvRows = await parseFile('/path/to/file')
  return csvRows
}

const csvRows = useTimeSeriesData()

报错信息 #

Argument of type 'Promise<csvRow[]>' is not assignable to parameter of type 'csvRow[]'.
Type 'Promise<csvRow[]>' is missing the following properties from type 'csvRow[]': length, pop, push, concat, and 29 more.ts(2345)

解决方案 #

1. 运行时获取同步值：在async函数内用await #

useTimeSeriesData是异步函数，直接调用必然返回Promise。要拿到csvRow[]类型的实际值，必须在async函数内部通过await等待Promise完成：

// 普通async函数示例
const fetchData = async () => {
  const csvRows = await useTimeSeriesData()
  // 此时csvRows类型为csvRow[]，可正常使用数组方法
  console.log(csvRows.length)
}

fetchData()

如果是React函数组件，可结合useEffect和状态管理处理：

import { useEffect, useState } from 'react'

const MyComponent = () => {
  const [csvRows, setCsvRows] = useState<csvRow[]>([])

  useEffect(() => {
    const loadData = async () => {
      const data = await useTimeSeriesData()
      setCsvRows(data)
    }
    loadData()
  }, [])

  return <div>数据行数：{csvRows.length}</div>
}

2. 类型层面解包：用Awaited<T>标注类型 #

Awaited<T>是TypeScript的工具类型，仅用于类型系统层面的解包，不会改变运行时的Promise状态。如果需要明确某个Promise解包后的类型，可以这样使用：

// 获取useTimeSeriesData返回值的解包类型
type UnwrappedCsvData = Awaited<ReturnType<typeof useTimeSeriesData>>
// UnwrappedCsvData的类型就是csvRow[]

// 直接在变量标注中使用
const fetchData = async () => {
  const csvRows: Awaited<Promise<csvRow[]>> = await useTimeSeriesData()
  // csvRows类型为csvRow[]
}

3. 非async环境下的替代方案：使用.then()链式调用 #

如果无法在async函数中执行（比如全局作用域），可以用.then()链式调用获取结果：

useTimeSeriesData().then(csvRows => {
  // 这里csvRows是csvRow[]类型
  console.log(csvRows.length)
}).catch(error => {
  console.error('数据加载失败:', error)
})

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