TypeScript：具有“无”模块设置的 Pixi.js 类型

Question

I have a 100% JS project that runs in the browser with about 20 JS files or so that have all function names in the global scope. Currently I can just modify a JS file and refresh and immediately see the change.

However, I would like the benefits of static type checking; enter TypeScript. I added type annotations to variables and functions and set module to none . This works well! tsc will read in the.ts, do type checking, and then emit the same.js I had previously which I can run in-browser with no modifications.

The problem is when I want to integrate with a 3rd party library. In my case, pixi.js .

If I try to do something like let x = PIXI.settings.TARGET_FPMS;, then tsc complains Cannot find name 'PIXI' . I tried adding /// <reference path="pixi.min.js"/> , and while the path resolves, it still can't find the name.

Solutions online suggest I do npm install pixi.js and then import * as PIXI from 'pixi.js' . However, if I do that, I can no longer use the none module setting which means now I have to put import and export statements everywhere, which means the emitted.js files now have browser-incompatible require or import statements, which means now I need webpack or something to get rid of those, etc... the complexity is ballooning.

Is there a way have TypeScript access pixi.js type information without all the import/export/modules/webpack business? Basically I just want tsc to check that the shape of things is correct without radically changing the current app architecture.

Barring that, it seems like the only solution is to add: declare var PIXI: any; somewhere in the file.

Answer 1

From an HN post :

Here is a minimum "repro" of your use case: tsconfig.json

{
  "include": ["index.d.ts"],
  "compilerOptions": {
    "target": "es2015",
    "lib": ["es2015", "dom"],
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

index.d.ts

import * as PIXI from 'pixi.js'

declare global {
  interface Window {
    PIXI: typeof PIXI
  }
}

index.ts

console.log(window.PIXI)

There is still an import but because it is in the.d.ts file it won't be included in the runtime code.