module - Visual Studio Code 中 TypeScript 文件中的绝对模块路径解析

Question

我似乎无法说服 Visual Studio Code 解析绝对 TypeScript 模块路径。相对路径有效，但绝对路径无效。我希望 Visual Studio Code 从 ./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 it is of course not supposed to be used
import { Interface } from 'c:/..../src/api/interfaces';

最后一个当然不算数，因为每个开发人员的项目路径很可能不同。但是，即使我们都设置了一个系统变量 %ProjectXRoot%，我们也不能在代码中使用这个变量。 Visual Studio Code 不会解析此类模块路径。我试过了。

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

Currently installed versions
• TypeScript: 1.8.10
• VSCode: 1.1.1

问题

我试图以某种方式配置 Visual Studio Code 来解析绝对模块路径，但我似乎做不到。我尝试通过在两个不同的地方添加 baseUrl 来配置 tsconfig.json(在项目根目录中)。

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

我已经尝试过像 src、./src 和 ./src/ 这样的值，但它们在任何上层配置位置。

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

如果那不可能，至少从项目根目录解析绝对路径会更好。 Visual Studio Code 如何确定这一点？它是您打开文件夹的位置还是.vscode文件夹所在的位置？

但它仍然是绝对路径的可行解决方案。我试过使用类似于 Visual Studio 的 ~，但也无济于事。

^(未解决)

--正如 steinso 在 his answer 中指出的那样，所有以 /、./ 或 ../ 开头的模块都被认为是相对的。尤其是第一个完全让我感到惊讶，因为我通常认为这是一个项目根相对路径。

但这个事实基本上意味着主要问题现在变成了:我如何提供模块导入作为绝对路径 ^{(来自一些项目 根文件夹路径)} 吗？以斜杠开头的路径通常表示绝对路径，但在本例中并非如此。

即使我将编译器选项 moduleResolution 设置为 classic(因此模块解析不会查看 node_modules 文件夹)上面的第二组导入根据 Microsoft 的链接文档，实际上应该所有工作。但出于某种原因，我仍然在 Visual Studio Code 中看到红色波浪线，并且在编译过程中出现错误。

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

Answer 1

为了能够使用 Visual Studio Code 在 TypeScript 中使用导入的绝对路径，您应该使用下一版本的 TypeScript - typescript@next，即 TypeScript v2。为此，请执行以下操作:

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

   npm i typescript@next -D

2. 在 Visual Studio Code 中

   i) 转到菜单 File → Preferences → Workspace Settings(这会生成 .vscode 目录，位于项目根并初始化 settings.json 文件。)

   ii) 将以下 key:value 对放入 settings.json 文件

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

3. 在 tsconfig.json 中将以下键值对添加到 'compilerOptions'

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

1. 重新加载 Visual Studio Code

如果你的目录结构如下:

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

然后从 main.ts 导入 /src/app/shared/service.ts 你现在可以 import {} from 'src/app/shared/服务;

如果您使用 webpack 和 ts-loader 来转译 .ts 文件，您应该将以下内容添加到 resolve webpack.config.js 配置文件的 部分。

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

请引用this用于绝对模块分辨率。