How to TypeScript since you added the definitions?

Questions
,
1

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:

2

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?

3

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…

4

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
5

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