类型 'typeof @types/p5/index"' 上不存在属性 'noise'

Question

我在 TypeScript Data Viz 项目中嗡嗡作响，并认为我会使用p5.js噪音 function 来节省一些时间。 相反，我遇到了一个我无法完全理解的问题。 与我在项目中使用的d3和three.js相比， p5模块似乎有些不同。 把它分解成非常基本的元素，我需要一些帮助来解释这个模块发生了什么。

import * as p5 from "p5"

p5.noise()

// Returns the error:
// Property 'noise' does not exist on type 'typeof import("/Users/.../ts-node-server/node_modules/@types/p5/index.d.ts")'. ts(2339)

如果我尝试直接使用 function 我会得到一个不同的错误。

import { noise } from "p5"

// Returns the error:
// Module '"p5"' has no exported member 'noise'.ts(2305)

我深入研究了node_modules并确认一切都在那里。 研究这个问题时，我注意到其他包也有同样的错误，但所有提供的解决方案都非常特定于 package 和项目，并且应用时不适合我的问题或解决我的问题。 我怀疑这与 global.d.ts 文件有关，但是当我查看时，没有什么不合适的。 如果对正在发生的事情有任何建议，我会采纳。

//Package.json

{
    "name": "ts-node-server",
    "version": "1.0.0",
    "description": "project",
    "main": "build/server.js",
    "scripts": {
        "compile": "tsc && node build/server.js",
        "dev": "./node_modules/nodemon/bin/nodemon.js -e ts  --exec \"npm run compile\""
    },
    "author": "..",
    "license": "ISC",
    "dependencies": {
        "d3": "^6.6.2",
        "dotenv": "^8.2.0",
        "express": "^4.17.1",
        "p5": "^1.3.1",
        "three": "^0.127.0"
    },
    "devDependencies": {
        "@types/d3": "^6.3.0",
        "@types/three": "^0.127.1",
        "@types/express": "^4.17.11",
        "@types/node": "^14.14.37",
        "@types/p5": "^0.9.1",
        "nodemon": "^2.0.7"
    }
}

//tsconfig.json
{
    "compilerOptions": {
        "outDir": "./build",
        "rootDir": "./src",
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmit": false,
        "esModuleInterop": true,
        "strict": true,
        "target": "ES6"
    },
    "include": ["src/**/*"],
    "exclude": ["**/node_modules", "**/config", "**/build", "**/*.md"]
}

Answer 1

如果您必须在用 typescript 编写的 Node.js 应用程序中运行 p5.js 函数，这是一种方法：

1. 添加npm依赖：p5、window、canvas
2. 添加 npm devDependencies：@types/p5
3. 将某些 JSDOM window 属性注入全局 scope: window , document , screen , navigator

注意：这适用于noise function，但我不知道实际尝试创建或绘制到 canvas 的任何函数的行为是什么。

这是Repl.it 中的一个工作示例。

这是我的 package.json：

{
  "name": "p5js-test",
  "version": "1.0.0",
  "description": "Test p5.js Node.js app.",
  "scripts": {
    "p5js-test": "ts-node --files src/main.ts",
    "compile": "tsc"
  },
  "bin": {
    "p5js-test": "./build/src/main.js"
  },
  "author": "Paul Wheeler",
  "license": "MIT",
  "dependencies": {
    "canvas": "^2.7.0",
    "p5": "^1.3.1",
    "window": "^4.2.7"
  },
  "devDependencies": {
    "@types/node": "^15.0.1",
    "@types/p5": "^0.9.1",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.4"
  }
}

这是我的 main.ts：

import Window from 'window';

// globals expected to exist by p5js (must come before the import)
// Note: doing this may not be entirely kosher according to the JSDOM documentation
//       but it gets p5.js working
(<any> global).window = new Window();
(<any> global).document = global.window.document;
(<any> global).screen = global.window.screen;
(<any> global).navigator = global.window.navigator;

import p5 from 'p5';

const inst = new p5(p => {
  // I'm not totally sure this is actually needed
  p.setup = function() { };
});

console.log('using noise from instance: ' + inst.noise(1, 2, 3));