Suggestion: Documentation for typescript

[TakesTheBiscuit]

Description of the problem

Three.js doesn't currently have a typescript section to the docs (that i could see, certainly).

Describe the bug or feature request in detail:

We should look to add an MVP doc for typescript to the docs which can list common issues and some more detail about how it works.

At the moment the typescript documentation is spread across the web on SO and in closed issues here in this repo

Three.js version

r111 ^

Browser

• All of them

OS

• All of them

[looeee]

Do you mean that you want to add a manual page like "How to use three.js with Typescript"?

[Mugen87]

I agree it would be good to have a guide about Typescript usage with three.js which e.g. explains how to create a basic project setup. This seems to be a frequently asked question at the forum.

[donmccurdy]

Is there a general “how to use typescript in a new project with some dependencies” tutorial we could point at? Is using threejs with TS different from any other library?

[Mugen87]

Is using threejs with TS different from any other library?

There is still the issue with duplicated imports of three.js in the final bundle. A sample project configuration that shows how to avoid this issue and that detects the correct three.js typings would be helpful for starters.

E.g. https://discourse.threejs.org/t/jsm-modules-for-browser-double-import-with-typescript/8235

[kmturley]

Can we also add recommend ways to import multiple modules?

This doesn't work:

import { DRACOLoader, GLTFLoader } from 'three/examples/jsm/loaders';

This does work:

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

This doesn't work:

import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
import { WebGLRenderer } from 'three/examples/jsm/renderers/WebGLRenderer';

But this does:

import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
const renderer = new THREE.WebGLRenderer();

[donmccurdy]

^TBH, since that's not really TypeScript-specific, I would love to see an ESM import in every examples/ (non-core) API doc page. 😇 Mockup:

[TakesTheBiscuit]

Sorry for abandoning this - this looks hopeful - i had a conflict between TS version and threejs TS version and package.json hell - managed to sort it out after some trial and error (mainly error!)

[DavidPeicho]

Regarding the doc, I think we should just state that it's better to setup the tsconfig.json file to use the Node resolution algorithm. Otherwise people that aren't completely understanding TypeScript will not understand why they can't import an example (like import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; will fail).

I just tried right now and nothing more than that is really needed for the setup.

Also, it could be good to note that using the Node algorithm, the typings are resolved in node_modules/three/src/**/.dt.s. So TS imports those typings, but your code technically import node_modules/three/build/three.module.js. It feels a bit counter-intuitive like that, but it works.

[TakesTheBiscuit]

See i imagine even this thread is going to be helpful - that comment @DavidPeicho about the import makes so much sense to read.
Docs are like gold dust :)

[kmturley]

@DavidPeicho It is strange that TypeScript definition points to the src folder:
import { abc } from '../../../src/Three';

But the javascript file points to the build folder:
import { abc } from "../../../build/three.module.js";

I believe it cant result in accidentally compiling two THREE.js versions into the same minified file? if you import a source Class and an example Loader?

import { Object3D, Scene } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

or maybe it's closure compiler doing something funky on my end?
When I changed the import to:
import { Object3D, Scene } from 'three/build/three.module';

closure resolves the correct location