javascript - Hvordan overstyre en TypeScript UMD global type-definisjon?

Jeg har installert three@^0.103.0, som har sine egne typedefinisjoner.

I src/global.d.ts i prosjektet mitt har jeg:

import * as _THREE from 'three'

declare global {
    const THREE: typeof _THREE
}

Deretter i src/global.ts har jeg

import * as THREE from 'three'
(window as any).THREE = { ...THREE }

Så i src/my-code.js prøver jeg å bruke THREE som en global variabel, f.eks.

console.log(new THREE.Vector3(1,2,3)) // ERROR, 'THREE' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Det forteller meg at 'THREE' refererer til et UMD-globalt objekt, men den nåværende filen er et modul. Vurder å legge til en import i stedet..

Når jeg hopper til definisjonen av THREE, tar det meg til node_modules/three/src/Three.d.ts, som ikke er min src/global.d.ts-fil.

Så, det ser ut som om TypeScript ignorerer mine global.d.ts-definisjoner?

Min tsconfig.json inneholder

  "allowJs" true,
  "checkJs" true,
  "include": ["src/**/*"]

og jeg har global.d.ts som er inne i src.

Hvis jeg legger til

/// <reference path="./global.d.ts" />

til toppen av src/my-code.js-filen (JavaScript), så fungerer det, og jeg kan hoppe til definisjonen av THREE som tar meg til min global.d.ts-fil.

Hvorfor fungerer det ikke uten reference-kommentaren?

Svar #1

For three.js kunne du erklære kompilatoralternativet allowUmdGlobalAccess i tsconfig.json:

"compilerOptions": {
    "allowUmdGlobalAccess": true,
}

Dette vil gi TypeScript tilgang til prosjektets globale UMD, hvor three.js er oppført når du installerer det. Da kan du bruke det i prosjektet ditt på samme måte som for eksempel JQuery.

Hvis dette alternativet ikke er tilgjengelig - oppdater din TypeScript.

Noen detaljer

Svar #2

Ovenstående bør fungere. Det er bare ett lite problem:

De to global-filene har samme navn! (dvs. global.ts og global.d.ts)

I dette tilfellet ser det ut til at TypeScript slår dem sammen (eller noe), og dermed ser det ut til å behandle global som den samme modulen (som i import './global' som er tvetydig).

Så, ved å gi ett modul et annet navn, fungerer alt.

For eksempel, gi nytt navn til src/global.ts til src/make-global.ts, og la src/global.d.ts være, så vil det fungere.

Jeg dro meg i håret og lurte på hva som foregikk til jeg omdøpte en av filene.

Relaterte artikler