TypeScript 错误:node_modules/@types/三/三核.d.ts(767,24):错误 TS2304:找不到名称“Iterable”

2023-12-02

我有这个错误:

TypeScript 错误:node_modules/@types/三/三核心.d.ts(767,24): 错误 TS2304:找不到名称“Iterable”。

截屏

我使用本指令中的 gulp 工作流程:https://www.typescriptlang.org/docs/handbook/gulp.html

我为 VS2015 安装了 TypeScript 2.2.2。

这是完整的代码:

import * as THREE from "three";

// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts
class Game
{
    private _scene: THREE.Scene;
    //private _canvas: HTMLCanvasElement;
    private _camera: THREE.PerspectiveCamera;
    private _renderer: THREE.WebGLRenderer;
    private _axis: THREE.AxisHelper;
    private _light: THREE.DirectionalLight;
    private _light2: THREE.DirectionalLight;
    private _material: THREE.MeshBasicMaterial;
    private _box: THREE.Mesh;

    public constructor()
    {
        //this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
        this._scene = new THREE.Scene();
        this._camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this._renderer = new THREE.WebGLRenderer();
        this._axis = new THREE.AxisHelper(10);
        this._light = new THREE.DirectionalLight(0xffffff, 1.0);
        this._light2 = new THREE.DirectionalLight(0xffffff, 1.0);
        this._material = new THREE.MeshBasicMaterial({
            color: 0xaaaaaa,
            wireframe: true
        });
        this._box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), this._material);
    }

    public createScene(): void
    {
        this._renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this._renderer.domElement);
        this._scene.add(this._axis);
        this._light.position.set(100, 100, 100);
        this._scene.add(this._light);
        this._light2.position.set(-100, 100, -100)
        this._scene.add(this._light2);
        this._box.position.x = 0.5;
        this._box.rotation.y = 0.5;

        this._camera.position.x = 5;
        this._camera.position.y = 5;
        this._camera.position.z = 5;

        this._camera.lookAt(this._scene.position);
    }

    public animate(): void
    {
        requestAnimationFrame(this.animate);
        this._render();
    }

    private _render(): void
    {
        let timer = 0.002 * Date.now()
        this._box.position.y = 0.5 + 0.5 * Math.sin(timer)
        this._box.rotation.x += 0.1
        this._renderer.render(this._scene, this._camera)
    }
}

window.onload = () =>
{
    let game = new Game();
    game.createScene();
    game.animate();
}

解决方案是: "lib": [ "es2015", "dom" ]

tsconfig.json

{
  "files": [
    "src/Game.ts"
  ],
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es5",
    "lib": [ "es2015", "dom" ]
  }
}

固定代码示例:http://codepen.io/8Observer8/pen/oWoXyz

/// <reference path="../../node_modules/@types/three/index.d.ts" />

//import * as THREE from "three";
// this line does't work. Error: Cannot find module 'three' from ...

// https://github.com/pinqy520/three-typescript-starter/blob/master/src/index.ts

class Game
{
    private _scene: THREE.Scene;
    //private _canvas: HTMLCanvasElement;
    private _camera: THREE.PerspectiveCamera;
    private _renderer: THREE.WebGLRenderer;
    private _axis: THREE.AxisHelper;
    private _light: THREE.DirectionalLight;
    private _light2: THREE.DirectionalLight;
    private _material: THREE.MeshBasicMaterial;
    private _box: THREE.Mesh;

    public constructor()
    {
        //this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
        this._scene = new THREE.Scene(); // create the scene
        // create the camera
        this._camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this._renderer = new THREE.WebGLRenderer();
        this._axis = new THREE.AxisHelper(10); // add axis to the scene
        this._light = new THREE.DirectionalLight(0xffffff, 1.0); // add light1
        this._light2 = new THREE.DirectionalLight(0xffffff, 1.0); // add light2
        this._material = new THREE.MeshBasicMaterial({
            color: 0xaaaaaa,
            wireframe: true
        });
        // create a box and add it to the scene
        this._box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), this._material);
    }

    public createScene(): void
    {
        // set size
        this._renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this._renderer.domElement); // add canvas to dom
        this._scene.add(this._axis);
        this._light.position.set(100, 100, 100);
        this._scene.add(this._light);
        this._light2.position.set(-100, 100, -100)
        this._scene.add(this._light2);
        this._scene.add(this._box)
        this._box.position.x = 0.5;
        this._box.rotation.y = 0.5;

        this._camera.position.x = 5;
        this._camera.position.y = 5;
        this._camera.position.z = 5;

        this._camera.lookAt(this._scene.position);
    }

    public animate(): void
    {
        console.log("animate");
        requestAnimationFrame(this.animate.bind(this));
        this._render();
    }

    private _render(): void
    {
        let timer = 0.002 * Date.now();
        this._box.position.y = 0.5 + 0.5 * Math.sin(timer);
        this._box.rotation.x += 0.1;
        this._renderer.render(this._scene, this._camera);
    }
}

window.onload = () =>
{
    let game = new Game();
    game.createScene();
    game.animate();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TypeScript 错误:node_modules/@types/三/三核.d.ts(767,24):错误 TS2304:找不到名称“Iterable” 的相关文章

随机推荐