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';

当前安装的版本
• 打字稿：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 中指出的那样，所有以/、./ 或../ 开头的模块都被认为是相对的。尤其是第一个完全让我吃惊，因为我通常认为这是一个项目根相对路径。

但是这个事实基本上意味着主要问题现在变成了：我怎样才能提供模块导入作为绝对路径 ^{（来自一些项目 em> 根文件夹路径）} 呢？以斜线开头的路径通常意味着绝对的，但在这种情况下它不是。

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

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

Answer 1

您需要指定：

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

然后基本路径将默认为您的 tsconfig.json 的目录，在 compilerOptions 中添加 rootDir 以更改它。 编辑：这似乎没有任何效果。

这将允许导入，例如：

import { Interface } from 'api/interfaces';

请注意，任何以 . 或 ../ 或 / 开头的路径都被视为相对路径。

编辑：模块分辨率

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

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

假设你是import { Interface } from "api/interfaces"，来自源文件/src/views/View.ts。然后，Typescript 将在以下路径中查找模块：

1. /src/views/api/interfaces.ts
2. /src/api/interfaces.ts
3. /api/interfaces.ts

注意：这仍然是相对的，想象一下，如果您位于 /src/views/View.ts 时，您是 import {Home} from "Home/Home"。在这种情况下，即使路径是/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 2

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

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

   npm i typescript@next -D

2. 在 Visual Studio 代码中

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

4. 重新加载 Visual Studio 代码

如果你有以下目录结构：

+ 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/service;

如果您使用webpack 和ts-loader 转译.ts 文件，则应在resolve 配置文件的resolve 部分添加以下内容。

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

绝对模块分辨率请参考this。

Answer 3

如果您已正确设置路径：

{
  …
  "compilerOptions": {
    …
    "baseUrl": ".",
    "paths": {
      "~/*": ["app/assets/javascript/*"],
      "*": ["node_modules/*", "app/assets/javascript/packs/*"]
    }
  }
}

如果您仍然遇到问题，可以尝试重新加载 Visual Studio Code：Cmd/Ctrl + Shift + P 并输入 @ 987654322@.

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