javascript - Tyepscript with two.js in vscode

Question

I am trying to use two.js with typescript to make a 2D Canvas project.

Thus install @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"
  }
}

Yet unfortunately when I am trying to import in my ts file, the complie result shows it could not find resolve the module. Module not found: Error: Can't resolve 'two.js' in 'D:Projectslueseacoresrccore'

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

But I found node modules directory, two.js exists.

question from:https://stackoverflow.com/questions/65644346/tyepscript-with-two-js-in-vscode

Answer 1

You have to install the twojs-ts npm package like this:

npm install twojs-ts

Then you can use it like this:

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();
}