Hacker News new | ask | show | jobs
by ht85 1362 days ago
If I understand correctly, before moving to TS / npm, you would concatenate your library files and your own code, and in your own code reference libraries using some kind of global variable à la `$.` for jquery?

If that's the case, you could add the libraries .d.ts to your project and augment the global.Window interface with types pulled from those definitions. You would then be able to call `window.something` and have the correct type and should work after cat'ing everything together.

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?

1 comments

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....

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-