2

I am trying to create a web game using webGL, TypeScript and node. I have a file structure that currently looks like this

> node_modules
> src
   engine.ts
   webgl.ts
   index.ts
index.html
package.json

engine.ts looks like this: 

namespace EngineSpace {
    export class Engine {
        // ....
    }
}

and webgl.js:

namespace EngineSpace {

    export class WebGLUtil {
       // .... 
    }
}

and index.js

window.onload = function() {
    let engine = new EngineSpace.Engine();
    engine.start();
}

However when I run npm start, I get that src/index.ts:5:22 - error TS2304: Cannot find name 'EngineSpace'..

I am not sure why it cannot resolve this namespace. Given that I am trying to create a game, how should I have this set up / what would be best practices?

below is the package.json: file 

{
  "name": "typescript-engine",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "@types/node": "^12.11.1",
    "nodemon": "^1.19.4",
    "ts-node": "^8.4.1",
    "typescript": "^3.6.4"
  }
}

here is the tsconfig:

{
  "compilerOptions": {

    "target": "es5",                       
    "module": "commonjs",                     
    "lib": ["es6","dom"],                    

    "outDir": "lib",                          
    "rootDir": "src",                         

    "strict": false,                       
   "esModuleInterop": true,                 

    "resolveJsonModule": true              
  }
}
Improve this question
7
  • Can you please add your package.json and start script Commented Oct 18, 2019 at 5:52
  • I have added package.json Commented Oct 18, 2019 at 5:59
  • as I can see you are using ts-node to run the program I thought you want to run this on the web as you are using window object here. You can't use window object in nodejs. Please do paste your tsconfig also Commented Oct 18, 2019 at 6:10
  • Ok. I have added that. If I am trying to get this to run in the browser, can I not still use node.js for my backend? How would you suggest setting up the project? I just want to make sure I get this part right. Commented Oct 18, 2019 at 6:15
  • If you want to run this on browser then you need to create a bundle of your project using any bundler tool like webpack. Commented Oct 18, 2019 at 6:19

1 Answer 1

Reset to default
1

If you want to use namespace in nodejs side you need to export it also to use it in another module. Becuase namespace will be converted like this

engine.ts

namespace EngineSpace {
  export class Engine {
    public start() {
      console.log('hello');
    }
  }
}

enigne.js

var EngineSpace;
(function (EngineSpace) {
    class Engine {
        start() {
            console.log('hello');
        }
    }
    EngineSpace.Engine = Engine;
})(EngineSpace || (EngineSpace = {}));

And if you want to use some property of another module in nodejs you need to export it and need to require it in another module.

Refer this for nodejs namespace

For the browser setup with typescript please refer this

Hope it helps you

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Ok thank you. The browser setup definitely helped. I'm just not sure where my engine file which describes EngineSpace namespace. Also, where do I put my index.js code i showed you? thanks.
you can keep the same structure, as browser don't have module options at the end it will be converted to single file
Interesting. I changed my entry in the webpack file to be index.tsx. However, it looks like now it does not know what EngineSpace is? Maybe I should put that back to the react file. How can I have my main.tsx run?
Are you creating the react project or a normal one?
I have downloaded the react setup, and replaced the webpack config to start at my index.tsx as opposed to their app.tsx. However it still does not like the EngineSpace thing. I want to have multiple files appending to the EngineSpace namespace by wrapping export class' in it. So I have a few files like: namespace EngineSpace { export class Thing {...} }. So I figured In my index.tsx I could just call EngineSpace.Thing()? But this is not working
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.