How to extend pixi.js types with Typescript?

[SenPie]

Hi.

I want to manually make a spritesheet by passing the json data and base texture. So, I made a method to does that and returns a promise

function parseSpritesheet(baseTexture: BaseTexture, json: Object): Promise<any> {
  let spritesheet = new Spritesheet(baseTexture, json as ISpritesheetData);
  return new Promise((res, _) => {
    spritesheet.parse((textures: Texture[]) => {
      res(textures);
    });
  })
}

However, when do so typescipt gives me following error:

I checked and callback of the parse method gives you the array of textures, that it made. However, in the typescript definition of the Spritesheet class it is omitted and I cannot pass an argument, which I believe is a bug. So, to bypass that error I made my own type definition (index.d.ts) to extend Spritesheet like this

import { Spritesheet } from "pixi.js";

declare class Spritesheet {
  parse(callback: (textures?: Texture[]) => void): void;
} 

and it is added to the tsconfig. However, the issue does not disappear. So my question is how to correctly extend the typings that pixi.js already provides?

[ivan.popelyshev]

SenPie, just make a pull request. You are already old user

[SenPie]

yey pixi 6.1.0 is out ???

[ivan.popelyshev]

As for original questions - its possible to modify certain pixi classes from outside through GlobalMixins mechanism.  Just add a "d.ts" in your project that adds interfaces to GlobalMixins: https://github.com/pixijs/pixi-plugin-example/blob/master/global.d.ts , you can reference it from one of your files, and TS will understand whats is going on: https://github.com/pixijs/pixi-plugin-example/blob/482e1f1fc399ae16065aea4fa124fd52d108f503/src/index.ts#L2

Sadly, Spritesheet has no mixin interface

[SenPie]

That sucks. I upgraded the pixi version to 6.1.2, but I still get the error

Writing this way allows me to bypass the error for now, so I will stick with it. However, I hope this gets fixed in the future versions.

// parse the spritesheets
function parseSpritesheet(baseTexture: BaseTexture, json: Object): Promise<any> {
  let spritesheet = new Spritesheet(baseTexture, json as ISpritesheetData);
  return new Promise((res, _) => {
    spritesheet.parse((...textures: Texture[]) => {
      res(textures[0]);
    });
  })
}

 

[ivan.popelyshev]

> I hope this gets fixed in the future versions.

make a PR?

[SenPie]

ye sure, I will make a PR