How to eliminate compile time errors in TypeScript with three.js and vscode

Questions
1

I have been trying to make a very simple demo of three.js and TypeScript. I lifted most of the code from
[ThreeJS example with a few files in TypeScript on Playground](this example)

You can see my version here on https://github.com/rkwright/Hello-TS-Chrome-3:

The problem I am seeing is that vscode complains that it can’t find some of the dependencies, e.g.

error

The really odd part is that vscode/ts apparently generates the right code and the example works fine with no errors in the console but I can’t figure out how to eliminate the above errors.

So why do I see TypeScript errors? Is there some configuration in vscode I am missing? Do I need a package.json, perhaps? Any suggestions would be helpful. I am aware that this may not be, strictly speaking, specific to three.js but thought I would ask anyway. TIA

2

Please, download and compile in VSCode my example: https://github.com/8Observer8/usage-orbitcontrols-in-typescript-on-playground

But before you execute tsc you need to execute the command: npm install

This example show how to use OrbitControls in TypeScript

3

To eliminate errors in your example you need to add in tsconfig.json this info:

    "types": [
        "requirejs",
        "three"
    ],
4

Unfortunately, for me, that makes no difference. Same errors. BTW, I am using tsc 2.92 and vscode 1.30

5

Try to update tsc:

npm install typescript -g

6

This is your example: GitHub - rkwright/Hello-TS-Chrome-3: A simple hello world demo using Typescript and Three.js

How do you compile without tsconfig.json? Please, add tsconfig.json in your project in Github.

You need to set “module”: “amd” for usage with Require.js

And add package.json. You need to create package.json by these commands:

npm init -y
npm i -D @types/three @types/requirejs

7

I do have a tsconfig.json - it is in a subfolder .vscode. It contains:

{
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "lib": [
            "es2015", "dom"
        ]
    },
    "files": [
        "../MyScene.ts",
        "../Program.ts",
        "../RequireConfig.ts"
    ],
    "exclude": [
        "node_modules"
    ],
    "types": [
        "requirejs",
        "three"
    ]
}

As you see “module” is set.What purpose does the package.json serve in this context? But I will experiment. BTW, did you mean “three” instead of “tree”? I.e.

npm init -y
npm i -D @types/three @types/requirejs

Thank you very much for your suggestions. Much appreciated.

8

Ah, with these changes, the compile errors have disappeared. And the little app still works without errors.

NOW I need to figure out WHY these changes made the difference. Learning, learning, learning. :slight_smile:
Again, @8Observer8, thanks for your help.
My intent is to figure out how all this is supposed to work then write it up as a short blog.

9

I glad that I helped you. Try to add very simple OrbitCotrols in your TS-project.

10

Well, that will be an interesting sub-project of its own. I have been using three.js for a few years now (see for example). Quite awhile ago, I forked the original OrbitControls and folded in some changes from a couple of folks (and myself). The result is that is has deviated from the vanilla OrbitControls but supports mice, trackballs and tablets/phones.

So it will be a little more challenging, but I am sure it will be educational… :slight_smile:

11

You can add OrbitControls like this: Usage OrbitControls in TypeScript on Playground

12

But I don’t know why OrbitCotrols does not work on Playground.