javascript - Typescript 找不到屏幕外 Canvas

Question

我正在尝试将 Three.js 项目移至 TypeScript。当我尝试进行顶部编译时，我会在 Three.js 存储库上收到此问题中引用的错误:

https://github.com/mrdoob/three.js/issues/17698

按照这些步骤，我安装了 @types/offscreencanvas 并编辑了我的 tsconfig.json，但现在我在尝试运行 tsc 时得到以下输出:

node_modules/@types/offscreencanvas/index.d.ts(16,53): error TS2304: Cannot find name 'CanvasState'.
node_modules/@types/offscreencanvas/index.d.ts(16,66): error TS2304: Cannot find name 'CanvasTransform'.
node_modules/@types/offscreencanvas/index.d.ts(16,83): error TS2304: Cannot find name 'CanvasCompositing'.
node_modules/@types/offscreencanvas/index.d.ts(17,5): error TS2304: Cannot find name 'CanvasImageSmoothing'.
node_modules/@types/offscreencanvas/index.d.ts(17,27): error TS2304: Cannot find name 'CanvasFillStrokeStyles'.
node_modules/@types/offscreencanvas/index.d.ts(17,51): error TS2304: Cannot find name 'CanvasShadowStyles'.
node_modules/@types/offscreencanvas/index.d.ts(17,71): error TS2304: Cannot find name 'CanvasFilters'.
node_modules/@types/offscreencanvas/index.d.ts(17,86): error TS2304: Cannot find name 'CanvasRect'.
node_modules/@types/offscreencanvas/index.d.ts(17,98): error TS2304: Cannot find name 'CanvasDrawPath'.
node_modules/@types/offscreencanvas/index.d.ts(18,5): error TS2304: Cannot find name 'CanvasText'.
node_modules/@types/offscreencanvas/index.d.ts(18,34): error TS2304: Cannot find name 'CanvasImageData'.
node_modules/@types/offscreencanvas/index.d.ts(18,51): error TS2304: Cannot find name 'CanvasPathDrawingStyles'.
node_modules/@types/offscreencanvas/index.d.ts(18,76): error TS2304: Cannot find name 'CanvasTextDrawingStyles'.
node_modules/@types/offscreencanvas/index.d.ts(18,101): error TS2304: Cannot find name 'CanvasPath'.
node_modules/@types/offscreencanvas/index.d.ts(34,53): error TS2304: Cannot find name 'CanvasRenderingContext2DSettings'.
node_modules/@types/offscreencanvas/index.d.ts(36,90): error TS2304: Cannot find name 'ImageBitmapRenderingContext'.
node_modules/@types/offscreencanvas/index.d.ts(49,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(51,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(53,22): error TS2304: Cannot find name 'CanvasImageSource'.
node_modules/@types/offscreencanvas/index.d.ts(58,43): error TS2304: Cannot find name 'ImageBitmapSource'.
node_modules/@types/offscreencanvas/index.d.ts(59,43): error TS2304: Cannot find name 'ImageBitmapSource'.
node_modules/@types/offscreencanvas/index.d.ts(64,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(68,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(72,48): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(76,26): error TS2304: Cannot find name 'WindowOrWorkerGlobalScope'.
node_modules/@types/offscreencanvas/index.d.ts(76,53): error TS2304: Cannot find name 'WindowEventHandlers'.
node_modules/@types/offscreencanvas/index.d.ts(77,70): error TS2304: Cannot find name 'Transferable'.
node_modules/@types/offscreencanvas/index.d.ts(80,83): error TS2304: Cannot find name 'Transferable'.
node_modules/three/src/renderers/webvr/WebVRManager.d.ts(13,15): error TS2304: Cannot find name 'VRDisplay'.
node_modules/three/src/renderers/webvr/WebVRManager.d.ts(14,21): error TS2304: Cannot find name 'VRDisplay'.

这是我的package.json:

{...
    "dependencies": {
    "@types/webgl2": "0.0.5",
    "offscreen-canvas": "^0.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@types/gsap": "^1.20.2",
    "@types/offscreencanvas": "^2019.6.1",
    "@types/three": "^0.103.2",
    "babelify": "^10.0.0",
    "bootstrap": "^4.4.1",
    "browserify": "^16.5.0",
    "fancy-log": "^1.3.3",
    "gsap": "^3.0.5",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-cssnano": "^2.1.3",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-tap": "^2.0.0",
    "gulp-typescript": "^6.0.0-alpha.1",
    "gulp-uglify-es": "^2.0.0",
    "jquery": "^3.4.1",
    "three": "^0.110.0",
    "tsify": "^4.0.1",
    "typescript": "^3.7.4",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  }
}

和我的tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "types": ["webgl2", "offscreencanvas"],
        "lib": [
            "ES2016",
            "DOM",
            "ES2015",
            "ES2015.Iterable"
        ],
        "outDir": "dist/js/projects"
    },
    "file": [
        "src/js/projects/main.js"
    ]
}

Answer 1

根据我对您问题的评论

这似乎是 TypeScript 版本问题，但 package.json 中的版本似乎是正确的。您是否尝试过从 package.json 中的 script 运行此命令，而不是通过终端？

{
  //...
  "scripts": {
    "build": "tsc",
     //...
  },
  //...
}

然后您可以运行npm run build或yarn build。