OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I configure my tsconfig with pixijs v5?

  • Thread starter Thread starter hanesjw
  • Start date Start date
H

hanesjw

Guest
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:

Code:
let s = new PIXI.Sprite(textureName);

I have to do:

Code:
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?

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

Here is my package.json

Code:
{
  "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.

Code:
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 {
  }
}

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

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

<p>For example instead of:</p>

<pre><code>let s = new PIXI.Sprite(textureName);
</code></pre>

<p>I have to do:</p>

<pre><code>let s = new Sprite(textureName);
</code></pre>

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

<p>How can I configure it so it behaves like the first option?</p>

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

<p>Here is my package.json</p>

<pre><code>{
"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"
}
</code></pre>

<p>Here is a sample ts file.</p>

<pre><code>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 {
}
}
</code></pre>
 

Latest posts

S
Replies
0
Views
1
Sergey Bakaev Rettley
S
Top