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:
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"],
}
}