node.js - Three.js 与 typescript 自动完成

Question

我有一个使用 Typescript 和 Three.js 的 Node.js 项目。为了导入模块，我使用 commonjs 语法，通过配置

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

在我的tsconfig.json中。我通过 NPM 下载了 Three.js，有一个像这样的 typescript 文件:

const THREE = require('three');
const scene = new THREE.Scene();

编译得很好，但我没有得到任何自动完成。我不认为这特定于所使用的编辑器，因为 Visual Studio Code 以及带有 YouCompleteMe 的 Neovim 都不起作用。如果我使用 ES6 模块语法，两者都可以工作:

import * as THREE from 'node_modules/three/src/Three';
const scene = new THREE.Scene();

但是，如果不提供库的实际路径，我就无法让它工作(这是稍后使用 webpack 时的问题)。我忘记配置什么来获得自动完成(或者没有显式定义路径的 ES6 语法，此时我对这两种解决方案都很好)？

编辑

正如对已接受答案的评论中提到的，我无法找到我的错误，但在尝试创建一个最小的工作项目时找到了一个可行的解决方案。所以我会将其发布在这里，以防对其他人有所帮助。如果您遇到同样的问题，请仍然阅读答案，因为它是正确的。

我的源文件(在src/main.ts中):

import * as THREE from 'three';
const scene = new THREE.Scene();

package.json (使用 webpack 来测试库是否可以在那里解析):

{
  "devDependencies": {
    "@types/node": "^12.0.4",
    "three": "^0.105.2",
    "ts-loader": "^6.0.2",
    "typescript": "^3.5.1",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }
}

tsconfig.json:

{
  "compilerOptions": {
      "baseUrl": ".",
      "paths": { "*": ["types/*"] },
    "target": "es6",
    "module": "es6",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules/"
  ]
}

webpack.config.js:

const path = require('path');

module.exports = {
    entry: './src/main.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },
    module: {
        rules : [
            { test: /\.ts$/, use: [ 'ts-loader' ], exclude: /node_modules/ }
        ]
    }
};

Answer 1

您的 package.json 文件中安装了哪个版本的 third？确保它是 0.101 或更高版本，因为那时 TypeScript 支持开始了。我建议您使用最新版本(截至撰写本文时为 105)，因为它会在每个版本上更新定义文件。

然后，在您的 .ts 文件中，您可以使用以下命令导入它:

import * as THREE from "three";

// After importing, THREE is available for auto-complete.
var lala = new THREE.WebGLRenderer();

编辑:

您可能需要执行path-mapping在您的 .tsconfig 文件中强制编译器找到正确的模块地址。我从来没有这样做过，但是 Typescript 文档建议了这样的事情:

{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "three": ["node_modules/three/src/Three"] // relative to "baseUrl"
    }
  }
}

更新 r126

从修订版 r126 开始，Three.js 已将 Typescript 声明文件移至单独的存储库。如果您使用的是 r126 或更高版本，则必须运行 npm install @types/Three 作为第二步。确保you install the version针对您的 Three.js 版本的 @types/Three。例如:

"three": "0.129.0",
"@types/three": "^0.129.1",