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

Posted 2023-02-22

【中文标题】Visual Studio Code 中 TypeScript 文件中的绝对模块路径解析

【英文标题】：Absolute module path resolution in TypeScript files in Visual Studio Code

【发布时间】：2016-10-03 01:25:20

【问题描述】：

我似乎无法说服 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 中仍然出现红色波浪线，并且在编译过程中出现错误。

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

【问题讨论】：

我提供了一个适用于 typescript@next 和一些次要配置的答案。

我通过在我的 tsconfig 中添加“include”来实现这一点：（例如"include": ["js/*"]）typescriptlang.org/docs/handbook/tsconfig-json.html

【参考方案1】：

您需要指定：

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

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

这将允许导入，例如：

import  Interface  from 'api/interfaces';

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

编辑：模块分辨率

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

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

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

/src/views/api/interfaces.ts /src/api/interfaces.ts /api/interfaces.ts

注意：这仍然是相对的，想象一下，如果您位于 /src/views/View.ts 时，您是 import Home from "Home/Home"。在这种情况下，即使路径是/src/views/Home/Home，它也可以工作。

这些是可能的解决方案：

/src/views/Home/Home -> 请注意这是如何工作的。 /src/Home/Home /Home/Home

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

【讨论】：

似乎不起作用。我在这里学到的唯一一件事是，在开头提供/ 不是项目根目录，而是相对路径。所以我的问题现在根据更新的问题减少了。

这很奇怪，我们在我们的项目中使用它，VSCode 没有任何问题。所有路径都相对于我们的 js/ 目录，并使用我指定的语法。打字稿 1.8.9，VSCode 1.1.1。

我使用了 typescript 1.5.3，但升级了 (npm -i -g typescript@1.8.10) 并重新启动了 VSCode (1.1.1) 但没有任何区别。所以我基本上使用的是比你更新版本的 TS。如果您删除 moduleResolution 或更改为默认值 node 有什么不同吗？

我将 moduleResolution 更改为“node”，一段时间后，我的所有导入都出现错误。但是我发现 rootDir 似乎没有效果。我还更新了我的答案，更详细地说明了解决方案的实际工作原理，以防这是您的问题所在。

还要确保您的 tsconfig.json 文件中没有错误，例如列出的文件不存在。

【参考方案2】：

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

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

npm i typescript@next -D

在 Visual Studio 代码中

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

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

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

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

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

重新加载 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。

【讨论】：

试过这个，但它对我不起作用。要从<project_root>/tests/unit/thing-test.ts 导入<project-root>/addon/thing.ts，我执行import thing from 'my-module/thing';。我不能使用 ember-cli 构建插件的方式的相对导入 b/c（有一个运行测试的虚拟应用程序）。 ln -s ../addon node_modules/my-module 启用 vscode 来解析模块，但这是不可持续的。我正在使用带有 broccoli-typescript-compiler@0.6.2 的 typescript@2.0.0。我的tsconfig.json 包括"compilerOptions": "baseUrl" : "./", "paths": "my-module/*": ["./addon/*"]。我做错了什么？

【参考方案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 可能会在绝对路径分辨率上出现故障。

【讨论】：

对于我们其他人来说，就是 Shift + Ctrl + P。