Webpack / Typescript 未正确解析 for-await 循环答案

【问题标题】：Webpack / Typescript not correctly parsing for-await loopWebpack / Typescript 未正确解析 for-await 循环
【发布时间】：2019-04-22 12:35:19
【问题描述】：

在我的 vue-cli typescript 项目中遇到yarn build 的障碍：

tmpDataDocs 是 Promise<DisplayableData> 对象的数组。据我了解for await控制结构，循环内doc的类型应该是解析的DisplayableData对象，而不是Promise<DisplayableData>。

VSCode 这个循环没有问题，yarn serve 循环没有问题。只有build 磕磕绊绊。

    195:35 Argument of type 'Promise<DisplayableData>' is not assignable to parameter of type 'DisplayableData'.
      Property 'id_datashape' is missing in type 'Promise<DisplayableData>'.
        193 |     for await (const doc of tmpDataDocs) {
        194 |       tmpData.unshift(
      > 195 |         displayableDataToViewData(doc)
            |                                   ^
        196 |       );
        197 |     }
        198 |

关于如何修复构建的任何建议？

【问题讨论】：

标签： typescript webpack async-await vue-cli-3

【解决方案1】：

一个不满意的答案：重写代码使其不使用for-await 构造。

// builds successfully
for (const docPromise of tmpDataDocs) {
  const doc = await docPromise;

  tmpData.unshift(
    displayableDataToViewData(doc)
  );
}

【讨论】：

for await 使用实现Symbol.asyncIterator 接口的对象。如果你的 tmpDataDocs 只是一个可迭代的 promise，你可以使用 for (const docPromise of await Promise.all(tmpDataDocs))
谢谢！我不知道await 可以在那里使用。现在主要是往墙上扔东西。