vscode 中 two.js 的打字稿

Question

我正在尝试使用 two.js 和打字稿来制作一个二维 Canvas 项目。

这样安装@types/two.js

{
  "name": "blueseacore",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "unit": "karma start",
    "build": "webpack --mode=development --config webpack.config.js",
    "web": "cd ./bundle && http-server -o -c-1"
  },
  "keywords": [
    "rf"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jasmine": "^3.6.2",
    "@typescript-eslint/eslint-plugin": "^4.10.0",
    "@typescript-eslint/parser": "^4.10.0",
    "eslint": "^7.16.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-typescript": "^0.14.0",
    "jasmine-core": "^3.6.0",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cli": "^2.0.0",
    "karma-jasmine": "^4.0.1",
    "karma-typescript": "^5.2.0",
    "ts-loader": "^8.0.13",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3",
    "typescript-eslint-parser": "^22.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "dependencies": {
    "@types/two.js": "^0.7.4",
    "mitt": "^2.1.0"
  }
}

然而不幸的是，当我尝试导入我的 ts 文件时，编译结果显示它找不到解析模块。 找不到模块：错误：无法在 'D:\Projects\blueseacore\src\core'

中解析 'two.js'

export class PreviewLayer {
twoObj = new Two({ width: 1024, height: 768 });
}

但是我找到了节点模块目录，two.js存在。

Answer 1

你必须像这样安装 twojs-ts npm package:

npm install twojs-ts

那么你可以这样使用它：

import Two from 'twojs-ts';

const elem = document.getElementById('draw-shapes');

if (elem) {
    const two = new Two({ width: 285, height: 200 }).appendTo(elem);
    // two has convenience methods to create shapes.
    const circle = two.makeCircle(72, 100, 50);
    const rect = two.makeRectangle(213, 100, 100, 100);

    // The object returned has many stylable properties:
    circle.fill = '#FF8000';
    circle.stroke = 'orangered'; // Accepts all valid css color
    circle.linewidth = 5;

    rect.fill = 'rgb(0, 200, 255)';
    rect.opacity = 0.75;
    rect.noStroke();

    // Don't forget to tell two to render everything
    // to the screen
    two.update();
}

vscode 中 two.js 的打字稿

Tyepscript with two.js in vscode

javascript

typescript

two.js