search

davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Typescript definition issues #84

Closed uahic closed 5 years ago

uahic commented 5 years ago

Hi there,

first of all: thank you for your effort in this project! I work with Angular >6 and Pixi 4.8.1. It seems that the typescript definitions of pixi-viewport do not recognize the namespace of PIXI

node_modules/pixi-viewport/@types/index.d.ts(47,9): error TS2503: Cannot find namespace 'PIXI'

I manually inserted an import of PIXI into the definition file, however, I dont know if there are other mechanism that are expected to do that already

simonpeters commented 5 years ago

Hi!

I'm running into the same issue, did you find a workaround?

davidfig commented 5 years ago

I'm not super familiar with typescript definition files. @ertrzyiks or @macropp, can you help with this one?

macropp commented 5 years ago

Hey, I saw you're importing Pixi as import * as PIXI from 'pixi.js/dist/pixi.js';, can you try import * as PIXI from "pixi.js";?

Importing pixi.js file from dist folder actually imports javascript file, so Typescript service doesn't get a chance to have a look if the module provides type definitions. I'd strongly suggest you never import specific files from npm modules, instead try to import modules or named exports.

simonpeters commented 5 years ago

Pixi breaks if you import with import * as PIXI from "pixi.js"; see issue

macropp commented 5 years ago

Seems like it's Angular 6 build that breaks. Not sure how to resolve the issue, if you have suggestions, they're welcome :)

rpurushotma commented 5 years ago

With Angular 7 I get the same error even with just "import * as PIXI from 'pixi.js'" The app itself works fine, though. I don't suppose there's any way to just suppress the errors? Is there documentation/examples anywhere about best ways to use this with angular/webpack?

screen shot 2018-10-25 at 11 03 33 am

uahic commented 5 years ago

You may have a look at my library https://github.com/uahic/ng-pixi . I had the same problems, somehow I managed to go around :) take a look at the package.json

You need for example "@types/pixi.js": "^4.8.1", ( npm install --save @types/pixi.js@4.8.1) But then there will be an issue in the index.d.ts of either pixi or pixi-viewport (cant remember), just modify the line where it will complain from PIXI.ticker.Ticker to PIXI.Ticker and you'll be fine

rpurushotma commented 5 years ago

thanks for the fix @uahic , I didn't run into any issues with Ticker yet (probably because my application doesn't use it yet). I did get this error:

ERROR in src/app/pages/fsli-work-page/evidence-modal/evidence-modal.component.ts(39,30): error TS2339: Property 'interaction' does not exist on type 'WebGLRenderer | CanvasRenderer'. Property 'interaction' does not exist on type 'WebGLRenderer'.

But typecasting app.renderer to :any took care of that error.

davidfig commented 5 years ago

Feel free to reopen if this is still an issue.