如何解决使用generator函数时遇到的Typescript错误

1. 未显式声明Generator泛型导致类型推导失败 #

• 错误原因：Typescript默认无法自动推导Generator函数的yield产出值类型、return返回值类型、next方法入参类型，未显式声明时会触发类型不匹配错误。
• 解决方法：给Generator函数添加Generator<YieldType, ReturnType, NextType>泛型声明，三个参数依次对应：
  • YieldType：函数内yield关键字产出的值的类型
  • ReturnType：函数最终return返回的值的类型
  • NextType：调用迭代器next()方法时传入的参数的类型
• 示例代码：

// 正确声明泛型的Generator函数
function* demoGen(): Generator<number | string, boolean, undefined> {
  yield 100
  yield 'test'
  return true
}

2. tsconfig编译配置不支持Generator语法 #

• 错误原因：tsconfig.json中target配置低于ES2015时，Typescript不会默认启用Generator语法支持，会报语法不识别错误。
• 解决方法：修改tsconfig.json的编译配置，将target调整为ES2015及以上版本，同时引入对应的核心库声明：

{
  "compilerOptions": {
    "target": "ES2015",
    "lib": ["ES2015", "ESNext.Generator"]
  }
}

如果需要兼容ES5及更低版本的运行环境，需要额外安装引入regenerator-runtime垫片处理Generator的运行时兼容。

3. Generator调用方式错误导致类型不匹配 #

• 错误原因：Generator函数调用后返回的是迭代器对象，直接将其作为返回值使用会和预期的yield产出值类型不匹配。
• 解决方法：先调用Generator函数获取迭代器实例，再调用迭代器的next()方法获取产出值：

const iter = demoGen()
// 第一次调用next获取第一个yield产出值
console.log(iter.next().value) // 100
// 第二次调用next获取第二个yield产出值
console.log(iter.next().value) // 'test'
// 第三次调用next获取最终return值
console.log(iter.next().value) // true

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