如何在打字稿中使用生成器功能答案

【问题标题】：How to use generator function in typescript如何在打字稿中使用生成器功能
【发布时间】：2023-03-19 17:46:01
【问题描述】：

我正在尝试在打字稿中使用生成器功能。但是编译器会报错

error TS2339: Property 'next' does not exist on type

下面是我的代码最接近的示例。

export default class GeneratorClass {
    constructor() {
        this.generator(10);
        this.generator.next();
    }
    *generator(count:number): Iterable<number | undefined> {
        while(true)
            yield count++;
    }   
}

Here is the playground link for the same

【问题讨论】：

标签： javascript typescript ecmascript-6 generator

【解决方案1】：

next 方法存在于函数返回的生成器上，而不是生成器函数本身。

export default class GeneratorClass {
    constructor() {
        const iterator = this.generator(10);
        iterator.next();
    }
    *generator(count:number): IterableIterator<number> {
        while(true)
            yield count++;
    }   
}

【讨论】：

@anandaravindan：将类型从Iterable更改为Iterator。
@FelixKling 谢谢。刚才查了文档，返回类型是IterableIterator。
@anandaravindan 我很好奇，Iterator 和 IterableIterator 有什么区别？
@anandaravindan 感谢分享。文档链接会很有帮助。
@Bergi 和 Iterator 有一个 next 方法。 Iterable 具有返回迭代器的 Symbol.iterator 属性。同时具有（next 方法和Symbol.iterator 属性）的对象称为IterableIterator。你可以在这里阅读更多关于它的信息：typescript.tv/hands-on/… 还有一个关于它的视频教程：youtube.com/watch?v=qZN0Lo-f3iE

【解决方案2】：

我看到此错误是因为我的 tsconfig.json 的目标是 es5。

我只是更改（摘录）自：

"target": "es5",
"lib": [
    "es5",
    "es2015.promise"
]

到：

"target": "es6",
"lib": [
    "es6"
]

错误消失了。

注意：对于 VS Code，我需要重新加载窗口以便 IntelliSense 识别更改。

【讨论】：

【解决方案3】：

要解决这个问题，了解生成器函数（简称生成器）及其返回值之间的区别非常重要。

生成器函数（由星号标记）是一个函数，它返回一个生成器对象。生成器对象满足 iterator 和 iterable 的要求。

Iterators 有一个 next 方法（这是您在问题中寻找的方法）。并且 iterables 有一个名为 Symbol.iterator 的属性（指定一个默认迭代器），这使得它们可以在 for 循环中使用。

因为生成器函数返回一个生成器对象并且生成器对象是一个可迭代的迭代器，所以您必须声明一个返回类型IterableIterator。在您的情况下，它将是 IterableIterator<number>。

因为这里的术语很相似，所以我记录了一个Generator tutorial 来解释差异。使用生成器函数时，请确保在 tsconfig.json 中将 target 设置为 es6。

【讨论】：