VScode javascript Intelisense for typescript libraries without using import

Question

I am developing a web based javascript app that uses a relatively big library (specifically pixi.js). That means InteliSense would be really usefull for both inline documentation and syntax hinting.

So far I have managed to activate InteliSense by downloading the npm package of this library and importing its original typescript files as if I was working on a node.js project: import * as PIXI from 'pixi.js'

The problem is, this will crash the script when trying to run it in a web. That means I have to choose between running the script and having InteliSense which is not optimal.

Is there a way to achieve the same result without using the import keyword? (and therefore not crashing the script)

I have also tried the triple slash reference which does nothing for me ///<reference path="node_modules/pixi.js/lib/index.d.ts" />

EDIT: This is my package.json file

{
  "dependencies": {
    "pixi.js": "^5.0.0"
  },
  "devDependencies": {
    "@types/pixi.js": "^5.0.0",
    "pixi.js": "^5.0.0"
  }
}

Answer 1

You've said you're using the library by including a script tag for the minified, release version directly. That suggests to me you aren't using a bundler like Vite, Webpack, Rollup, Parcel, etc (which is fine). You could solve this by using a bundler; but you shouldn't have to.

With the help of this answer I've figured out how to get the PIXI namespace types exposed as PIXI (to match the global the lib creates) globally for the project:

Create a .d.ts file to augment Pixi.js's type definitions, for instance augment.pixi.d.ts, with these contents:

// Import the PIXI definitions
import type * as PIXI from "pixi.js";
// Export it as a namespace
export as namespace PIXI;
// Expose that namespace globally, to match the global
// variable pixi.js creates
export = PIXI;

Now, anywhere in your TypeScript code, TypeScript knows about the PIXI global the library defines and has the correct type for it. So for instance, if you type:

console.log(PIXI.
//              ^−−−− cursor here

...TypeScript knows what to auto-suggest for you (ALPHA_MODES and such):

Here's the complete minimal project I created to make sure it worked:

package.json:

{
    "name": "pixitest",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "tsc --project tsconfig.json"
    },
    "devDependencies": {
        "@types/pixi.js": "^5.0.0",
        "typescript": "^4.9.5"
    }
}

augment.pixi.d.ts as above.

tsconfig.json:

{
    "compilerOptions": {
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "target": "es2018",
        "outDir": "dist"
    }
}

main.ts:

console.log(PIXI.ALPHA_MODES.PMA);

When I do npm run build, dist contains only main.js, which is (in this case) just the code from main.ts (since main.ts didn't have any type annotations in it):

console.log(PIXI.ALPHA_MODES.PMA);