類型 '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));