Add Webmidi as global to my p5.js typescript project

93 Views Asked by At

I'm building a p5.js sketch without any framework/bundler. I just have a sketch.ts file, provided in this p5-typescript-starter project.

I see that they do some declarations and fancy typescript stuff in the global.d.ts file that enables me to use all the types and classes for p5 in my sketch.ts file.

//global.d.ts 
//works!
import * as p5Global from 'p5/global' 
import module = require('p5');
export = module;
export as namespace p5;

I want to have this same functionality, but for the WebMidi class (see https://webmidijs.org/), so I can access it my sketch.ts file. So I tried following the pattern used for exporting p5:

//webmidi.d.ts
//does not work as expected!
import * as webMidiGlobal from "webmidi"
import module = require('webmidi').WebMidi;

export = module;
export as namespace WebMidi

But when I go to try and use WebMidi, like I would p5, it doesn't work, I'm not getting intellisence and ts is throwing errors. For example, I know WebMidi.enable() is a valid function, but here we can see this is not recognized in VSCode:

enter image description here

What's the proper way to get WebMidi working with typescript, then?

TsConfig:

{
  "compilerOptions": {
    "module": "none",
    "esModuleInterop": true,
    "noImplicitAny": true,
    "outFile": "./build/build.js",
    "preserveConstEnums": true,
    "removeComments": true,
    "rootDir": "./sketch/",
    "sourceMap": true,
    "target": "es5",
    "moduleResolution": "node",
    "lib": ["dom"],
  }
}

0

There are 0 best solutions below