How do I configure my tsconfig with pixijs v5?

Question

I'm having an odd issue properly importing PIXI js in my typescript project.

The problem is I never have to use the PIXI prefix when referencing a PIXI object.

For example instead of:

let s = new PIXI.Sprite(textureName);

I have to do:

let s = new Sprite(textureName);

Everything works, it's just kind of an annoyance. I have a feeling it's how my tsconfig.json file is configured.

How can I configure it so it behaves like the first option?

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "target":"es2015",
    "moduleResolution": "node"
  }
}

Here is my package.json

{
  "name": "tester",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "dependencies": {
    "gsap": "^2.1.3",
    "howler": "^2.1.1",
    "rxjs": "^6.4.0"
  },
  "devDependencies": {
    "@types/facebook-js-sdk": "^3.3.0",
    "@types/gsap": "^1.20.2",
    "@types/howler": "^2.0.5",
    "@types/pixi.js": "^4.8.7",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "npm-install-webpack-plugin": "^4.0.5",
    "pixi.js": "^5.0.3",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.2.4",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC"
}

Here is a sample ts file.

import { Sprite, Texture } from "pixi.js";
import { IGameComponent } from "../interfaces/game-component.interface";

export class BaseSprite extends Sprite implements IGameComponent {
  constructor(texture?: Texture) {
    super(texture);
    this.interactive = false;
    this.interactiveChildren = false;
  }

  init(): void {
  }

  update(delta: number): void {
  }
}

Answer 1

You should import PixiJS like this:

import * as PIXI from "pixi.js";

This imports all the elements from pixi.js and puts them into the PIXI namespace.

What you are currently doing is only importing a few elements and putting them directly into the Sprite and Texture variables:

import { Sprite, Texture } from "pixi.js";

The ES module syntax can be confusing, but it allows for a lot of flexibility. You can limit exactly what is imported. You can also rename any module or part of a module as you desire. (Useful when two libraries use the same name). This reference lists all the ways import can be used.

---

update:

In addition, some plugins assume the existence of PIXI in the global namespace. Starting from version 5, there is no longer a global PIXI. The v5 migration guide explains how to fix this:

The quick and dirty fix is to put PIXI in the global namespace like this:

import * as PIXI from 'pixi.js';
window.PIXI = PIXI; // some bundlers might prefer "global" instead of "window"

The better solution is to shim the PIXI global in the webpack config. (See details from link above.)

Answer 2

For pixi.js v5 you should add the "pixi.js" module to your tsconfig.json like types in the compilerOptions section. And remove the @types/pixi.js module.

tsconfig.json
{...
"compilerOptions": {
   ...,
   "types": ["pixi.js"],
   }
}