在打字稿中导入 p5 class

Question

我正在从 Coding train 学习一些 p5 的东西，但我正在 Typescript/webpack 项目中编写所有内容。

我正在使用 p5 作为实例，我的代码工作正常，但我感觉我做错了什么。

import * as p5 from 'p5';

export class Particlehelper {
  private pos: p5.Vector;
  private vel: p5.Vector;
  private accl: p5.Vector;

  public constructor(p: p5) {
    this.pos = p.createVector(p.random(p.windowWidth), p.random(p.windowHeight));
    // this.vel = p.createVector(0, 0);
    this.vel = p5.Vector.random2D();
    this.accl = p.createVector(0, 0);
  }

这里让我感到困惑的是 - 我正在导入 P5，因为我需要 class 属性为 Vector 类型，但是为了实例化向量，我将 P5 从索引文件传递给构造函数.

particles[i] = new Particlehelper(p);

我有一种不对劲的感觉——听起来好像我在做同样的事情两次，但我无法弄清楚如何在 class.[=13= 中使用刚刚导入的 p5 ]

同样 - 我从未见过“public 构造函数”符号，但 linter 强迫我将它添加到那里 - 不确定是否可以？

谢谢，

Answer 1

这段代码没问题。关于 p5.Vector 的事情是它有点奇怪，因为它 1) 没有声明它是实际的构造函数参数，2) 可以使用对 p5 实例的引用来构造。这样做的原因是 p5.Vector 上有一些函数考虑了草图 angleMode（DEGREES 或 RADIANS）。当您使用 createVector 创建 p5.Vector 时，生成的矢量具有对 p5 实例的引用，并将遵循其角度模式。但是您也可以静态创建一个矢量，以这种方式创建的矢量不会遵循草图角度模式：

    p.angleMode(p.DEGREES);

    let v1 = p.createVector(1, 0);
    let v2 = p.createVector(0, 1);
    // Result is in degrees
    console.log(v1.angleBetween(v2));

    v1 = new p5.Vector();
    v1.set(1, 0);
    v2 = new p5.Vector();
    v2.set(0, 1);
    // Result is in radians
    console.log(v1.angleBetween(v2));

请注意，p5.Vector.random2d 还将创建一个使用默认角度模式（弧度）的向量。

在打字稿中导入 p5 class

Importing p5 in typescript class

typescript

p5.js