How to import p5.js into typescript?

@jasen 

To import p5.js into a TypeScript project, you can use npm to install the p5 library and then import it into your TypeScript file.

Here are the steps to import p5.js into a TypeScript project:

1. Install p5 library using npm:

1

npm install p5

1. Create a new TypeScript file (e.g. sketch.ts) in your project directory.
2. Import the p5 library at the top of your TypeScript file:

1

import * as p5 from 'p5';

1. Create a new p5 instance in your TypeScript file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

let sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(400, 400);
  };

  p.draw = () => {
    p.background(220);
    // draw your p5 sketch here
  };
};

new p5(sketch);

1. Compile your TypeScript file using TypeScript compiler or a build tool like Webpack or Parcel:

1

tsc sketch.ts

1. Include the compiled JavaScript file (e.g. sketch.js) in your HTML file:

1

<script src="sketch.js"></script>

1. Open your HTML file in a browser to see the p5 sketch running.

You have now successfully imported p5.js into your TypeScript project. You can now start creating interactive sketches using p5.js in a TypeScript environment.