three.js - Hur kan jag använda ThreeJS ES6-nativa moduler med Typescript?

Jag använder ThreeJS ES6-nativa moduler direkt i webbläsaren. Det är en riktigt häftig funktion där du bara kan import ThreeJS från dina javascript-filer utan någon modulbuntare.

Följande fungerar i javascript:

import * as THREE from './lib/three.module.js'
import { OrbitControls } from './lib/OrbitControls.js'

Nu vill jag göra detta i Typescript, jag installerade typescript-definitionerna med

npm install --save @types/three 

Men VS Code kan fortfarande inte hitta typdeklarationsfilerna:

⚠️ Could not find a declaration file for module '../lib/three.module.js'

⚠️  Could not find a declaration file for module '../lib/OrbitControls.js'.

Som föreslagits i kommentarerna ändrade jag importerna till

import * as THREE from 'three'
import { OrbitControls } from three/examples/jsm/controls/OrbitControls'

Nu hittas deklarationerna, men TypeScript kan inte hitta modulerna!

⚠️  An accessor cannot be declared in an ambient context and Failed to resolve module specifier "three". 

⚠️  Relative references must start with either "/", "./", or "../".

Hur kan jag använda ES6-inbyggda moduler från ThreeJs i mitt Typescript-projekt utan en modulbundlare?

Svar #1

Försök att organisera dina importeringar så här:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

Svar #2

Du behöver bara skapa en .d.ts-fil med samma namn som biblioteket - i ditt fall ./lib/three.module.d.ts. När du importerar * som Three från "./lib/three.module.js" kommer Typescript att leta efter en indexfil med typer som en del av modulupplösningsstrategin. I den här filen kan du enkelt exportera typer som beskriver modulens struktur. I ditt fall bör det räcka med bara

import * as Three from "three";
export = Three;