TypeScript + VSCode 中的自定义模块解析

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/*"
            ]
        },
    }
}

假设我在node_modules 中有react（甚至安装了@types/react）。当我尝试导入一些东西时，例如import * as React from "react" 或import MyComponent from "components/MyAwesomeComponent，两个导入都是错误的，消息 “找不到模块...” 等等。

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

相对导入仍然有效，但这是地狱，你知道的。

我绝对是 TypeScript 的新手，但我正在根据“模块解析”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'. ========

---

最终更新

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

感谢大家的帮助！

Answer 1

您可能必须添加此密钥：

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

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

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

（并且您的src 文件夹中有您的context 密钥）。

那么你应该在你的 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有关。尝试在您的 Webpack 配置中设置以下内容：

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