Typescript Module Augmentation

[DennisSmolek]

I saw in #5 you were referring to what's happening with the core library but in the meantime I can't for the life of me get my project to let your Augments work... I can pull in pixi_display but it won't merge up with the core PIXI namespace.

For the moment I'm manually adjusting a .d.ts file but I didn't know if you had a trick to get it to work

[ivanpopelyshev]

Yes, we solved that problem for pixi-spine, and its time to move it to pixi-display. Use modified ".d.ts", its ok.

[PapyElGringo]

Hi guys, can you detail a bit on how do we make it work with typescript? Im interested too :)

[ivanpopelyshev]

You have to modify "bin/pixi-display.js" or "bin/pixi-layers.js" file. remove "typeof" thing and change all modules to "PIXI.tilemap"

Or you can just use "pixi_display.DisplayGroup" instead of "PIXI.tilemap" when you define a field with specific type

[PapyElGringo]

Thanks ivan for the infos, but can we rollback a little? Im a newcomer in the PIXI community and im also a rookie in term of typescript.

I initially wanted to use the pixi-layers plugin who seem to be encapsuled inside the pixi-display plugins right? I'm asking this because you were talking about the pixi-tilemap.

ps: Im not even clear on how I am supposed to install a plugin in PIXI, is there a npm package for PIXI-display or Im forced to install it manually?

[ivanpopelyshev]

Sorry, my mistake :)

How to install pixi-layers:

1. look at https://github.com/pixijs/pixi-display/tree/layers
2. copy "bin/pixi-layers.js" to your libs folder, add it to html
3. copy "bin/pixi-layers.d.ts" to the folder where you store ".d.ts" files. If you dont have it, create.
4. add ///<reference path="path_to_ts/pixi-layers.d.ts"> to one of your ts files.

You can see pixi-layers plugin, but there's one problem:

let layer = new PIXI.display.Layer(); //that will work
let x : PIXI.display.Layer = layer; // that wont :(
let x : pixi_display.Layer = layer; //that will work

Solution to that problem was applied to pixi-spine, but not pixi-display

[PapyElGringo]

Thanks ! It's clear for me 👍

Im gonna try it soon and I'll come back if it's needed :)

[DennisSmolek]

I just modified the core pixi.js.d.ts file and included the pixi_display classes/changes It's a hack I know but I'd rather adjust one or two .d.ts files than all my code. This way let x: PIXI.display.Layer works as expected, and when a more solid Typescript definition rolls around I can switch.

[ivanpopelyshev]

ok, that works too :)

[PapyElGringo]

Hey guys I still have an issue :

In Typescript I used PIXI this way : import * as PIXI from 'pixi.js'; But the PIXI reference is different of the window.PIXI and PIXI.display exist only in window.PIXI

What is my mistake?

[ivanpopelyshev]

will that work? You'll have display as separate module that way

import * as pixi_display from 'pixi-display.js'

[DennisSmolek]

I was able to import PIXI from pixi_display but it dropped all the definitions from the core pixi.js version. It's setup right to Augment the main PIXI module but I couldn't get TS to do it.. You can import pixi_display but then when you call PIXI.display.Layer or anything on the display it throws that it doesn't exist..

I couldn't figure it out...

[ivanpopelyshev]

You have to import PIXI from pixi and pixi_display from pixi-display, "pixi_display.Layer" must work

[DennisSmolek]

You have to import PIXI from pixi and pixi_display from pixi-display, "pixi_display.Layer" must work

Yes, this works when I reference something like: var myLayer: pixi_display.Layer

but this throws an error

var myLayer: pixi_display.Layer = new PIXI.display.Layer()

[ivanpopelyshev]

what about that?

var myLayer: pixi_display.Layer = new pixi_display.Layer()

I'm sorry about your problems, we are going to port "pixi-spine" solution in this repo. It supports vanilla and browserify and webpack.

You can use modified ".d.ts" for now :)

[DennisSmolek]

No worries, that's what I figured, I kept getting weird errors so it was actually faster to just merge your .d.ts with the core one and wait for the fix down the road

[jlost]

Would love to see Layers working out of box with TypeScript, NPM, Webpack and ES6 module imports.

[garkin]

@jlost it should be pretty straightforward now.

npm i pixi.js @types/pixi.js pixi-display --save

import "pixi-display"; // import for side effects, need to be done once in `src/index.ts` 
import * as PIXI from 'pixi.js';

const greenGroup = new PIXI.display.DisplayGroup(0, false);

[ivanpopelyshev]

does that really work?

[garkin]

Or in case of pixi-layers (publish it to the npm, please):

npm i pixi.js @types/pixi.js https://github.com/pixijs/pixi-display/tarball/layers --save

import "pixi-layers"; // import for side effects, need to be done once in `src/index.ts` 
import * as PIXI from 'pixi.js';

const greenGroup = new PIXI.display.Group(0, false);

[ivanpopelyshev]

oh, nice :) I'll add that to README! You really solved it!