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/creact）。当我尝试导入时，例如import*作为React from“React”或importMyComponent from“components/MyAwesomeComponent，这两个导入都是错误的，并显示消息“Cannot find module…”等。

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

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

我绝对是TypeScript的新手，但我正在根据“模块解析”TypeScript文档做事，它不起作用。

非常感谢这里的任何帮助！

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

以下是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 强制更新项目设置，即使在重新加载 TypeScript 项目之后也是如此。我刚刚重新启动它，现在一切正常！:)

谢谢大家的帮助！

Answer 1

您可能需要添加此密钥：

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

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

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

（并且您的上下文键位于 SRC 文件夹中）。

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

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

(将您的< code>src文件夹作为< code>baseURL

我总是对打字稿使用以下配置

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

如果你使用的是很棒的打字稿加载器，我还包括这个：

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

编辑：

我认为导入错误与Webpack有关。尝试在Webpack配置中设置以下内容：

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