Sean Bradley provided a TypeScript-Three.js-Boilerplate, but I guess something more refined is required. Loading JS file in TS is not clean:
import * as THREE from "<install>/build/three.module.js"
Instead:
import * as THREE from "Three"
import {GLTFLoader} from "GLTFLoader" // Get 'GLTFLoader.d.ts'...
The paths tag in tsconfig.json allows such a simplicity in setting Three to "<install>/src/Three".
TS then uses Three.d.ts for type checking -> it works!
Unfortunately, TS generates import * as THREE from "Three" in the JS file resulting from compilation (that’s the reason why, I suppose, Sean dealt with three.module.js?).
Apart from missing something, this runtime import (i.e., import * as THREE from "Three") does not work: indeed, browsers DON’T deduce "Three" -> "Three.js" (Note that >>Three.js library<< builders provided "Three.js" at the same place as "Three.d.ts": smart!).
So, one may manually add the js suffix in the JS file as follows: import * as THREE from "Three.js" -> It works, but… -> stupid, tiring, anti-productive…
The missing link: browsers from import * as THREE from "Three" look for a "Three" directory containing an "index.js" file. In moving the source code from Three.js to Three/index.js, this works (problems remain for non-core components like GLTFLoader for instance).
Conclusion (hoping I’m not wrong): restructuring >>Three.js library<< file structure (subpart for TypeScript) based on the prior idea would help: import * as THREE from "Three" would be correct both for TS (compilation time) and JS (run time).
Comments welcome!!!
PS : this discussion IS NOT about packaging and production releases using webpack or whatever. Three.js-TypeScript beginners require a minimalist environment for play, test, etc.
Thanks for making my boilerplate really important,
but it works brilliantly,
here try it for yourself.
git clone GitHub - Sean-Bradley/Three.js-TypeScript-Boilerplate: Three.js TypeScript Boilerplate
cd Three.js-TypeScript-Boilerplate
npm install -g typescript
npm install
tsc -p ./src/server
tsc -p ./src/client
npm run dev
Now open your bowser and visit
http://127.0.0.1:3000/
I’m pretty sure I could make that work in less lines of code, but it’s part of my course that I teach how to build this. Bit by bit, It’s then up to you, to decide if you want to make it better. It’s only a tiny jump. But you can make it really hard for yourself if you tried.
You should see this, on this page
https://sbcode.net/threejs/threejs-typescript-boilerplate/
but running from your own desktop.
@seanwasere out of curiosity, why do you use from '/build/three.module.js' on line 1, instead of just importing from "three"?
because it works. You are free to download the boilerplate are rewrite it any way you wish. Go nuts.
Look at this
I don’t see any problems in the client.
And I also get the benefits of using typescript.
I read this forum all the time, and I see so many problems people have, that I just don’t have myself.
I know what my server is doing, and I know what my client is doing.
And just from typing
npm install three@latest
Both my client and my server are using exactly the same files.
And when I extend this with socket.io or other libraries, whether client or server, I still don’t have the problems that people are asking on these forums.
Make your versions as complicated as you want. Because for me, it just works.
I was honestly just curious. No need to get defensive, I wasn’t implying that it was wrong. 
Here is another example of problmes that I just don’t have.
Look, No errors in the client,
This uses my boilerplate.
It has GLTFLoader, DRACOLoader, draco_decoder, a compressed glb model, OrbitControls, stats.js, shadows and three.module.js
I also have the benefit of typescript in both my client and server scripts. (see more relevant intellisence context menu in image)
You can visit this the course page at https://sbcode.net/threejs/loaders-draco/
Starting the course at this point though, will be completely out of context for anybody. The simplicity of my approach won’t make any sense unless you start the course from the beginning. And people still complain. LOL
“Yeah, but…”
