javascript - Typescript 组件运行正确，但表示存在错误，因为它无法识别那里的属性

Question

我正在使用 Three.js 库在屏幕上绘制图像。当我创建我的 keywords = THREE.point(geometry, Materials) 时， typescript 说在 keywords.geometry.vertices 中不存在顶点，但是当我运行我的模块时，所有内容都会加载并响应，除此之外它还给我这个错误，说 vertices 确实存在不存在，如果它们不存在，我就不会绘制该图像。

几何体有一个叫做顶点的属性，当我通过 Three.point(geometry,material); 创建对象粒子时我从几何体中获取所有顶点，并通过执行 this.articles.geometry.vertices 来访问它们，但 typescript 说该属性在几何体中不存在，即使它有效。

尽管一切都按预期执行，但仍出现错误图片: 文本错误:

[at-loader] ./ClientApp/app/components/shared/backgroundScene/backgroundScene.component.ts:146:53 
    TS2339: Property 'vertices' does not exist on type 'Geometry | BufferGeometry'.
  Property 'vertices' does not exist on type 'BufferGeometry'.
[at-loader] ./ClientApp/app/components/shared/backgroundScene/backgroundScene.component.ts:147:56 
    TS2339: Property 'vertices' does not exist on type 'Geometry | BufferGeometry'.
  Property 'vertices' does not exist on type 'BufferGeometry'.
[at-loader] ./ClientApp/app/components/shared/backgroundScene/backgroundScene.component.ts:152:33 
    TS2339: Property 'verticesNeedUpdate' does not exist on type 'Geometry | BufferGeometry'.
  Property 'verticesNeedUpdate' does not exist on type 'BufferGeometry'.

绘制图像的源代码(其中显示顶点不存在)位于渲染中，drawImage 仅显示我如何添加到粒子中。一切工作正常，我只是不明白为什么当一切正常工作时我会收到这些错误。如果您知道如何获取类型以便我可以在对象中看到这些属性，请告诉我。如果您想知道的话，我已经导入了 Threejs 和打字内容，并且这些工作正常。当属性存在并且 typescript 说它不存在时，我只是在访问对象的属性时遇到问题，但当我运行我的代码时，我可以看到它确实存在。

public render() {
    this.renderer.render(this.scene, this.camera);

    // Draw image to screen
    for (var i = 0, j = this.particles.geometry.vertices.length; i < j; i++) {
        var particle:any = this.particles.geometry.vertices[i];
        particle.x += (particle.destination.x - particle.x) * particle.speed;
        particle.y += (particle.destination.y - particle.y) * particle.speed;
        particle.z += (particle.destination.z - particle.z) * particle.speed;
    }
    this.particles.geometry.verticesNeedUpdate = true;
}

public drawImage() {

    // Create vertices to draw the image.
    for (var y = 0, y2 = this.imageData.height; y < y2; y += 2) {
        for (var x = 0, x2 = this.imageData.width; x < x2; x += 2) {
            if (this.imageData.data[(x * 4 + y * 4 * this.imageData.width) + 3] > 128) {

                let vertex:any = new THREE.Vector3();
                vertex.x = Math.random() * 1000 - 500;
                vertex.y = Math.random() * 1000 - 500;
                vertex.z = -Math.random() * 500;

                vertex.destination = {
                    x: x - this.imageData.width / 2,
                    y: -y + this.imageData.height / 2,
                    z: 0
                };

                vertex.speed = Math.random() / 200 + 0.015;

                this.geometry.vertices.push(vertex);
            }
        }
    }
    this.particles = new THREE.Points(this.geometry, this.material);
    this.scene.add(this.particles);

    requestAnimationFrame(this.render);
}

Answer 1

我发现的修复不是最干净的，但我明确地将我的粒子转换到 for 循环中的任何它说顶点不存在的地方。我变了

原文:

this.particles.geometry.vertices.length;

修复:

(this.particles as any).geometry.vertices.length;

然后在我的 tsconfig 中将 noImplicitAny 标志设置为 true。

"noImplicitAny": true