打字稿找不到offscreencanvas答案

【问题标题】：Typescript Cannot find offscreencanvas打字稿找不到offscreencanvas
【发布时间】：2020-05-02 21:12:13
【问题描述】：

我正在尝试将 Three.js 项目移动到 TypeScript。当我尝试 top compile 时，我会在 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"
    ]
}

【问题讨论】：

导入这些的打字稿代码是什么样的？
这里是入口文件github.com/PickleProgramming/tesseract/blob/master/src/js/…。整个项目非常庞大，而且只会变得更大。您认为问题可能出在 .ts 文件中，而不是我的配置？如果是这样的话，我想我宁愿在其他地方使用 TS 并继续用常规 JS 编写我的 Three.js 项目。
我认为这很可能是配置问题。
您是从终端运行tsc，还是从package.json 内的脚本运行？似乎这可能是打字稿版本问题。如果您从终端运行，TS 版本可能与 repo 中安装的版本不同。
啊，是的，我想就是这样！我现在可以完成编译而不会出错！非常感谢！

标签： javascript node.js typescript npm three.js

【解决方案1】：

根据我对您问题的评论

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

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

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

【讨论】：