Question

我具有以下项目结构：

<PROJECT_FOLDER>
├── node_modules
├── src
│   ├── components
│   │   └── MyAwesomeComponent.tsx
│   ├── views
│   │   └── MyAwesomeView
│   │       └── index.tsx
│   ├── Application.tsx
│   └── index.tsx
├── webpack.config.js
└── tsconfig.json

和以下tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "moduleResolution": "classic",
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "sourceMap": true,
        "noImplicitReturns": true,
        "experimentalDecorators": true,

        "baseUrl": ".",
        "paths": {
            "*": [
                "src/*",
                "node_modules/*"
            ]
        },
    }
}

假设我在react中安装了node_modules（甚至安装了@types/react）。当我尝试导入某些内容时，例如import * as React from "react"或import MyComponent from "components/MyAwesomeComponent，这两种导入都与错误消息“找不到模块...” 等有关。 >

在编写导入字符串时，VSCode建议我使用node_modules中的模块，但是不建议我使用src/*中的文件夹。

相对导入仍然有效，但这真是个难题。

我绝对不是TypeScript的新手，但是我正在根据“ Module Resolution” TypeScript文档进行操作，因此它不起作用。

非常感谢您的任何帮助！

更新

我将我的moduleResolution更改为node并设置了@Alserda共享的配置（感谢您的回答，但看起来我做错了，因为您的配置无法解决问题）。然后，我运行建议的tsc --traceResolution。它也解决了我所有的导入问题，VSCode现在解决了node_modules，但仍然无法解决我的components/MyAwesomeComponent：

更新2

好吧，我的webpack.config.js已经有了相应的模块

但是我不认为问题出在这里，甚至没有运行webpack-dev-server，并且我相信VSCode不会使用webpack.config.js信息来配置项目：）

更新3

以下是components/MyAwesomeComponent导入的输出：

======== Resolving module 'components/MyAwesomeComponent' from '/home/username/path/to/project/src/Application.tsx'. ========
Explicitly specified module resolution kind: 'NodeJs'.
'baseUrl' option is set to '/home/username/path/to/project/src', using this value to resolve non-relative module name 'components/MyAwesomeComponent'.
Resolving module name 'components/MyAwesomeComponent' relative to base url '/home/username/path/to/project/src' - '/home/username/path/to/project/src/components/MyAwesomeComponent'.
Loading module as file / folder, candidate module location '/home/username/path/to/project/src/components/MyAwesomeComponent', target file type 'TypeScript'.
File '/home/username/path/to/project/src/components/MyAwesomeComponent.ts' does not exist.
File '/home/username/path/to/project/src/components/MyAwesomeComponent.tsx' exist - use it as a name resolution result.
======== Module name 'components/MyAwesomeComponent' was successfully resolved to '/home/username/path/to/project/src/components/MyAwesomeComponent.tsx'. ========

最终更新

VSCode即使在tsconfig.json之后也没有从我的Reload TypeScript project强制执行更新项目设置。我刚刚重新启动它，现在一切正常！：）

感谢大家的帮助！

Answer 1

您可能必须添加此密钥：

...
"include": [
    "src/**/*"
],
...

您使用的path键主要是为了让TypeScript了解您的导入对于Webpack配置将“起作用”。假设您在Webpack配置中有一个alias键，例如：

alias: {
  core: resolve(__dirname, '../src/services/core'),

（并且您的context文件夹上有src键）。

然后您应该在tsconfig中添加一个path键，例如

    "paths": {
        "core/*": ["./services/core/*"],

（（您的src文件夹为baseURL

我一直为TypeScript和React.js使用以下配置。对于我的多个项目来说，这一直很有效。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es3",
        "moduleResolution": "node",
        "baseUrl": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "strict": false,
        "sourceMap": true,
        "outDir": "dist/",
        "jsx": "react",

        "allowJs": true,
        "declaration": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "types": [ "node" ],
        "lib": ["es6", "dom"]
    },
    "include": [
        "src/**/*"
    ]
}

如果您使用的是awesome-typescript-loader，我还将包括以下内容：

    "awesomeTypescriptLoaderOptions": {
        "useCache": true,
        "forceIsolatedModules": true
    }

编辑：

我认为这是与Webpack相关的错误。您是否设置了source 我认为导入错误与Webpack有关。尝试在Webpack配置中设置以下内容：

const path = require('path');
...
context: path.resolve(__dirname, './src'),
resolve: {
  modules: ['src', 'node_modules']
...

TypeScript + VSCode中的自定义模块分辨率

更新

更新2

更新3

最终更新

1 个答案: