javascript - 在生成器函数中使用 yield 时，Typescript 不会推断 promise 类型

Question

我正在使用 Axios 来处理一些 API 获取，并且我正在生成器中执行该调用； async/await不是这个特定项目的选项。出于某种原因，即使 axios正在使我的类型正确， typescript 推断出 any当我使用 yield 时输入关键词。

function* foo() {
  // axios.get is returning Promise<AxiosResponse<T>>
  // but data is being inferred as "any"
  const { data } = yield axios.get<T>(url); 
  
  // do some stuff with data
}

如果我专门输入 axios 响应，它工作正常，但我觉得我错过了一些东西，因为 TS 没有自动获取类型

function* foo() {
  const { data }: AxiosResponse<T> = yield axios.get<T>(url); 
  
  // do some stuff with data
}

我还缺少其他步骤或配置吗？
这是我的 tsconfig

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "removeComments": true,
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "rootDirs": ["src", "src/stories"],
    "paths": {
      "*": ["./src/custom-types/*"]
    },
    "types": ["@emotion/core", "jest"]
  },
  "include": ["./src/**/*"]
}

Answer 1

TypeScript 无法推断 yield 的类型操作，因为这是由调用代码控制的。在您的情况下，听起来这个生成器正在被处理来自 axios 的 promise 的代码使用，并通过在调用 g.next 时提供 axios 结果来响应。 .如果您处于无法使用 async 的环境中，这是有道理的。/await ;生成器可用于让异步逻辑更清晰地流动，其中生成器由助手驱动，该助手从生成器获取 promise ，等待它解决，然后通过 next 将履行值传递回生成器— yield主要担任await 的 Angular 色这样做的时候。 ( co 是支持以这种方式使用生成器的库的一个示例。)因此使用生成器的代码期望生成器产生 Promise它还回了 promise 的履行值(value)。在这种情况下，这将产生 Promise<AxiosResponse<T>>并取回 AxiosResponse<T> .
要处理这个问题，您需要使用 Generator 对函数进行注释。 type，它接受三个类型参数:

T - 生成器通过 yield 生成的类型.

TReturn - 生成器完成后返回的类型。

TNext - 生成器消耗的类型(从 yield 接收)。

因此，将其应用于您的示例，我们将向 foo 添加一个泛型类型参数。并用 Generator 注释它:

function* foo<T>(): Generator<Promise<AxiosResponse<T>>, ReturnType, AxiosResponse<T>> {
    const { data } = yield axios.get<T>(url); 
    
    // ...do some stuff with data...

    return /*...something of `ReturnType` (or use `void` as the type argument above)... */;
}

仅适用于不熟悉 yield 的任何人和他们可能喜欢的生成器，这是一个生成器生成字符串、返回 bool 值并使用数字( playground link)的示例:

function* example(): Generator<string, boolean, number> {
    const a = yield "a";
    console.log(`Received ${a} for a`);
    const b = yield "b";
    console.log(`Received ${b} for b`);
    const c = yield "c";
    console.log(`Received ${c} for c`);
    const flag = (a + b) > c;
    return flag;
}

const g = example();
let result = g.next();
console.log(result.value);  // "a"
result = g.next(1);         // Passes 1 to the generator
// (Generator logs "Received 1 for a")
console.log(result.value);  // "b"
result = g.next(2);         // Passes 2 to the generator
// (Generator logs "Received 2 for b")
console.log(result.value);  // "c"
result = g.next(3);         // Passes 3 to the generator
// (Generator logs "Received 3 for c")
console.log(result.value);  // false (1 + 2 > 3 is false)