CODEWITHSUNDEEP
javascripttypescriptproperties
Chris
Chris

Reputation: 173

Typescript component runs correctly but says there is an error because it does not recognize a property that is there

I am using three.js library for drawing an image to the screen. When I create my particles = THREE.point(geometry, materials) typescript says that vertices does not exist in particles.geometry.vertices, but when I run my module everything loads and responds as it should besides it gives me this error saying vertices does not exists, and if they did not exist I would not have drawn that image.

Geometry has a property that is called vertices, and when I create the object particles through three.point(geometry, material); I get all the vertices from geometry and access them by doing this.particles.geometry.vertices, but typescript says the property does not exist in geometry even though it works.

Picture of error even though everything is executing as it should: enter image description here Errors in text:

[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'.

Source code for drawing image where it says vertices does not exist is in the render, and the drawImage just shows how I add to my particles. Everything works fine, I just do not get why I am getting these errors when everything is working correctly. If you know how to get the typings so I can see these properties in my object let me know. I have threejs imported and the typings if you were wondering and those work fine. I just come across problems accessing properties of objects when the property exists and typescript says it does not but when I run my code I can see that it does.

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);
}

Upvotes: 1

Views: 1636

Answers (1)

Chris
Chris

Reputation: 173

The fix I found was not the cleanest, but I explicitly cast my particle to any in my for loop where it said vertices did not exist. I changed

Original: 

this.particles.geometry.vertices.length;

Fix: 

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

Then in my tsconfig I set the noImplicitAny flag to true.

"noImplicitAny": true

Upvotes: 2

Related Questions