VSCode中TypeScript文件中的绝对模块路径分辨率

Question

我似乎无法说服VSCode解析绝对的TypeScript模块路径.相对路径有效,但绝对不行.我希望VSCode从./src文件夹中解析模块路径.

// this works when source file is in /src/here/there/file.ts
// and importing an interface in /src/api/interfaces.ts
import { Interface } from '../../api/interfaces';

// this doesn't work
import { Interface } from 'api/interfaces';
import { Interface } from '/api/interfaces';
import { Interface } from 'src/api/interfaces';
import { Interface } from '/src/api/interfaces';

// this works but is of course not supposed to be used
import { Interface } from 'c:/..../src/api/interfaces';

当然,最后一个不计算每个开发人员的项目路径很可能是不同的.但即使我们都设置了系统变量,%ProjectXRoot%我们也无法在代码中使用此变量.VSCode不会解析此类模块路径.我试过了.

// won't work
import { Interface } from '%ProjectXRoot%/api/interfaces';

当前安装的版本
•TypeScript:1.8.10
•VSCode:1.1.1

题

我试图以某种方式配置VSCode来解析绝对模块路径,但似乎无法这样做.我尝试通过在两个不同的地方添加来配置tsconfig.json(在项目根目录中)baseUrl.

{
    ...
    "compilerOptions": {
        "baseUrl": "./src", // doesn't work
        ...
    },
    "baseUrl": "./src", // doesn't work either
    ...
}

我试着像值src,./src并./src/但他们没有任何上配置的地方工作.

那么如何配置VSCode来解析某个文件夹中的绝对模块路径呢？

如果这不可能,那么从项目根目录中解析绝对路径至少会更好.我不知道VSCode如何确定？它是打开文件夹的位置还是.vscode文件夹所在的位置？不知道.但它仍然是绝对路径的可行解决方案.我尝试使用~类似的VS,但无济于事.

编辑^(未解决)

正如@steinso在他的回答中指出所有模块开头/,./或被../认为是相对的.特别是第一个让我感到惊讶,因为我通常认为项目的根相对路径.但这个事实基本上意味着现在的主要问题是:如何提供模块导入作为绝对路径 ^{(从某些项目根文件夹路径)}？带斜杠的起始路径通常意味着绝对,但在这种情况下它不是.

甚至当我设置的编译器选项moduleResolution,以classic(使模块的分辨率不会寻找到node_modules上述文件夹中)在第二组的进口实际上应该所有的工作按照微软的链接的文档.但由于某种原因,我仍然在VSCode中获得红色波浪线和编译期间的错误.

那么如何导入一个特定的项目模块而不提供它的确切相对路径,而只是它自己的项目相对路径呢？

Answer 1

为了能够使用VSCode在typescript中使用导入的绝对路径,你应该使用下一版本的typescript - typescript@next这是typescript v2.为此,请执行以下操作:

1. 通过npm安装typescript @ next,用于安装typescript v2.x

   npm i typescript@next -D

2. 在VSCode中

   i)转到文件>首选项>工作区设置 [这将.vscode在项目根目录生成目录并初始化settings.json文件]

   ii)将以下key:value对settings.json存档

   "typescript.tsdk": "node_modules/typescript/lib"

3. 在tsconfig.json添加以下项:值对'compilerOptions'

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

4. 重新加载VSCode

如果您具有以下目录结构:

+ node_modules
+ src
| + app
| |  + shared
| |  |  -service.ts
| |  -main.ts
+ typings
- tsconfig.json
- webpack.config.json
- package.json
- index.html

然后/src/app/shared/service.ts从main.ts你那里导入就可以了import {} from 'src/app/shared/service;

如果您正在使用webpack和ts-loader转换.ts文件,则应resolve在webpack.config.js配置文件部分添加以下内容.

resolve: {
    extensions: ['', '.js', '.ts'],
    alias: {
      "src": path.resolve('./src')
    }
  }

请参考这个绝对模块分辨率.

Answer 2

您需要指定:

    "compilerOptions": {
        "moduleResolution": "classic"
        ...

然后,基本路径将默认为tsconfig.json的目录,rootDir在compilerOptions中添加 以更改它.编辑:这似乎没有任何影响.

这将允许进口如下:

import { Interface } from 'api/interfaces';

请注意,任何路径开头.或../或者/被认为是相对的.

编辑:模块分辨率

请注意模块的解析方式.模块路径仍然是一些相对于当前文件的路径.

让我们用一个例子来说明当前场景:

让我们import { Interface } from "api/interfaces"从源文件中说出来/src/views/View.ts.然后,Typescript将在以下路径中查找模块:

1. / SRC /视图/api/interfaces.ts
2. / src目录/api/interfaces.ts
3. /api/interfaces.ts

注意:这仍然是如何使它相对的,想象一下当你import {Home} from "Home/Home"在哪里时/src/views/View.ts.在这种情况下,即使路径是,它也会起作用/src/views/Home/Home.

以下是可能的解决方案:

1. / src/views/Home/Home- >请注意这是如何工作的.
2. / src目录/Home/Home
3. /Home/Home

更多信息可以在这里找到:http: //www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 3

如果您已正确设置路径：

\n

{\n  \xe2\x80\xa6\n  "compilerOptions": {\n    \xe2\x80\xa6\n    "baseUrl": ".",\n    "paths": {\n      "~/*": ["app/assets/javascript/*"],\n      "*": ["node_modules/*", "app/assets/javascript/packs/*"]\n    }\n  }\n}\n

\n

如果您仍然遇到问题，也许可以尝试重新加载 Visual Studio Code: Cmd/Ctrl+ Shift+P并输入reload window.

\n

它只是随机停止为我工作并报告问题。我在网上花了大约 20 分钟试图弄清楚发生了什么变化，结果发现 Visual Studio Code 可能会在绝对路径分辨率上出现故障。

\n