Ask coding questions

← Back to all posts
p5 not working with typescript
potatojs

ok so i was searching for hours how to get third party libs working with typescript because apparently every "advanced" typescript tut is either using webpack or working in a node env and i hate it,
anyways i figured it out,
1. install the @types/{lib_name} package from npm
2. tell typescript to read the .d.ts files from the npm pack by adding the "lib_name" to the "types" array in the tsconfig
3. reference the lib in your html (cdn or download)
this list worked for jquery and moment which i used as tests, but didn't for the actual lib i'm doing all of this for, "P5js",
here is the test:
it's a gitbuh repo because i'm not wasting another hour trying to make this work in repl
what is happenning in this test:
vscode is telling me p5 is not defined while $ is,
in the browser p5 and $ are console logged as expected so the libs are there, the problem is with ts

Answered by Coder100 [earned 5 cycles]
View Answer
Voters
potatojs
Comments
hotnewtop
Coder100

yeah no it doesn't
there's 2 types
you either import the p5 class and so not everything is global import p5 from "p5"; iirc

or

you just don't use ts typings -- i don't believe the lib supports typings for global functions.

potatojs

@Coder100 "yeah no it doesn't" lol ok,
i don't understand the "import the p5 class", it makes sense with webpack but i'm not using webpack. so when i add that line the compiled js has it too, and it doesn't make any sense for the browser so it throws this error: Failed to resolve module specifier "p5";
but everyone recommends this solution :( what am i messing
btw i NEED to use ts typings

Coder100

why need ts typings?
how about declare module "p5"; or smth @potatojs

potatojs

@Coder100 ehh.. because that's the whole point of typescript? :D
anyways i think you are right

Coder100

i'm always right

yeah i haven't been able to get ts typings for p5 either @potatojs