Hacker News new | ask | show | jobs
by umvi 1362 days ago
Yes, that's exactly right. I just include pixi.min.js which exposes the "PIXI" global variable.

> If that's the case, you could add the libraries .d.ts to your project and augment the global.Window interface

Do you know where I can find an example of this? I've been able to do "npm install pixi.js", which gives me access to the .d.ts file but I'm not sure how to then map those types to the global PIXI object exposed by pixi.min.js without turning everything into a module and doing an "import PIXI" from node_modules of some flavor or another.

> Which bundler are you using? If you don't need any of the advanced webpack / rollup stuff, have you tried a fast one like esbuild?

My bundler is literally "cat *.js > bundle.js" which works well. I have not tried esbuild, though I've read good things about it. I'm sort of gunshy about learning new js tooling like this though ever since I learned grunt and then gulp once upon a time....

1 comments

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.
Thank you very much for posting this! I just tested this and it does exactly what I wanted - to get full type checking including 3rd party libs without having to convert all my existing files to be modules. I owe you a beverage of choice-