How to TypeScript since you added the definitions?

Hi,

I am trying to setup a TypeScript project structure for a Three.js web applications.

In the past, I was using @types/three:


But the author seems to have stopped development at r103 saying:
“This is a stub types definition. three provides its own type definitions, so you do not need this installed.”

And indeed, I am checking r105 and all classes have a .d.ts file.
This is awesome knowing I can keep using the latest build and have official typescript definitions… but I have some issues.

Here is where I am at.

In WebStorm, I create an empty typescript project.
I install three.js

npm i three

I setup my tsconfig.json

{
“compilerOptions”: {
“module”: “amd”,
“target”: “es5”,
“sourceMap”: true,
“allowJs”: true,
“outDir”: “built”,
“lib”: [
“dom”,
“es2015”
],
“baseUrl”: “.”,
“paths”: {
“three”: [“node_modules/three/src/Three”]
}
},
“include”: [
“src/**/*”
]
}

And finally I put in my built folder three.min.js and require.js
And as long as I use core three.js it works, and it’s great.

But I cannot seem to use the classes that are in the examples folders.
I know I would have to add some js files to the built folder for it to run, but first of all I cannot even build.

When I try to declare a EffectComposer for example, the WebStorm auto completion proposes to declare:

import {EffectComposer} from “three/examples/jsm/postprocessing/EffectComposer”;
And when I do I get proper autocompletion to the EffectComposer objects.

But at build I get the error:

Cannot find module ‘three/examples/jsm/postprocessing/EffectComposer’.

I’m guessing is has something to do with the way I configure my project.
I must be missing something.
Can anybody help me with that?
How do you configure your TypeScript projects?

Thanks a lot. :raised_hand_with_fingers_splayed:

I think you’re pointing to two separate builds of Three.js. You have the module:

“paths”: {
   “three”: [“node_modules/three/src/Three”]
}

and then it sounds like you’re also pointing to something like built/three.min.js. Not sure how the rest of your project is configured, but the compiler won’t find EffectComposer in three.min.js.

Can’t you just use var THREE = require('three'); without declaring it in your paths in TSConfig? Also, what are you using to compile your code from TypeScript to JavaScript? Webpack?

Hi marquizzo and thank you for replying.

You see, it seems I am still confused about a lot of things.
To build Typescript into javascript, I just use tsc -p tsconfig.json
It generates a js file for every ts file I got in my sources and I use require.js to load the modules.
Is it bad practice?

I felt I wouldn’t need to build Three.js, I have it in my built as three.min.js as you noticed, taken directly from the node_modules/three/build
All I need from the sources is type definition for autocompletion and compile-time error checking.
And it does work fine whith just the core of Three.js, only the jsm code I can’t seem to use properly.
I’ll try to configure Webpack and see how things go…

Ah, I see what you’re doing. I wouldn’t say it’s “bad practice”, but generating one .js file for each .ts file sounds hard to manage, and it sounds a bit slow to manually run the compiler each time you make a change. There is a faster way with Webpack. The way it works is that it merges all your .ts files into a single .js “structure”, also called a bundle. Then all you have to worry about is one output file, and you include it with <script src="path/to/bundle.js"> in your index.html.

Pros:

  • You no longer have to add a new require() for each additional TypeScript file you create.
  • You don’t have to tell tsc to re-compile each time you make a change.
  • Webpack watches your files for any changes and automatically re-compiles them every time you hit Save.
  • Webpack reloads your browser so you always see your latest code.

Cons: Takes a bit of setup at first, but it’s really fast once it’s running.

If you’re interested in using this approach, I created a template in Github that already has a Three.js/TypeScript/Webpack combo all set up and configured. All you have to do is:

  1. make sure you have Node.js installed
  2. npm install
  3. npm run dev
  4. Point your browser to: localhost:8000/web/

Then you can start digging in the src/ folder to play with the TypeScript code.

1 Like

Yes, indeed, I’ve setup Webpack and it works fine.
I still have much to learn, but except for the source mapping (which gets the line wrong) everything else is as confortable as it can be.
Thanks a lot for your help.

For anybody else checking this message, on my tsconfig I had to add
“moduleResolution”: “node” to have typescript accessing the jsm classes.
But Webpack is still needed to package everything.

1 Like