Module Visual Studio代码中TypeScript文件中的绝对模块路径分辨率

我似乎无法说服Visual Studio代码解析绝对类型脚本模块路径。相对路径有效，但绝对路径无效。我希望Visual Studio代码从上的/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代码将不会解析此类模块路径。我试过了

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

当前安装的版本
•打字稿：1.8.10
•VSCode:1.1.1

问题: 我试图以某种方式配置VisualStudio代码以解析绝对模块路径，但似乎无法做到这一点。我尝试通过在两个不同的位置添加

baseUrl

来配置tsconfig.json（在项目根目录中）

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

我尝试过像

src

、

/src

和

/src/

这样的值，但它们都不适用于任何较高的配置位置

那么，如何配置VisualStudio代码来解析某个文件夹中的绝对模块路径呢

如果这不可能，至少从项目根解析绝对路径会更好。VisualStudio代码如何确定这一点？它是您打开文件夹的地方还是.vscode文件夹所在的地方

但对于绝对路径来说，这仍然是一个可行的解决方案。我尝试过使用类似于VisualStudio的

~

，但也没有用

（未解决）

-- 正如steinso在中指出的，所有以

/

、

/

或

./

开头的模块都被认为是相对的。特别是第一个让我惊讶的是，我通常认为一个项目的根相对路径。 但这一事实基本上意味着，主要问题现在变成了：我如何提供模块导入作为绝对路径（从某个项目根文件夹路径）呢？以斜杠开始的路径通常意味着绝对路径，但在本例中不是

即使我将编译器选项

moduleResolution

设置为

classic

（这样模块解析就不会查看

node\u modules

文件夹），根据Microsoft的链接文档，上面的第二组导入实际上应该所有工作。但由于某些原因，我仍然会在VisualStudio代码中看到红色的曲线和编译过程中的错误

因此，我如何导入一个特定的项目模块，而不向其提供确切的相对路径，而只是它自己的项目相对路径？

您需要指定：

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

然后，基本路径将默认为tsconfig.json的目录，在编译器选项中添加

rootDir

，以对其进行更改。编辑：这似乎没有任何效果

这将允许导入，例如：

import { Interface } from 'api/interfaces';

请注意，以

或

./

或

/

开头的任何路径都被视为相对路径

编辑：模块分辨率

了解模块的解析方式。模块路径仍然与当前文件相关

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

假设您从“api/interfaces”导入{Interface}，从源文件

/src/views/View.ts

导入。然后，Typescript将在以下路径中查找模块：

/src/views/

api/interfaces.ts

/src/

api/interfaces.ts

/

api/interfaces.ts

注意：这仍然是相对的，想象一下当您位于

/src/views/View.ts

中时，如果您

从“Home/Home”

导入{Home}。在这种情况下，即使路径是

/src/views/Home/Home

，它也可以工作

以下是可能的决议：

/src/views/

Home/Home

->注意这是如何工作的

/src/

Home/Home

/

Home/Home

更多信息可在此处找到：

---

要使用Visual Studio代码在TypeScript中使用导入的绝对路径，您应该使用下一版本的TypeScript-typescript@next这是TypeScript v2。为此，请执行以下操作：

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

npm-itypescript@next-D

在VisualStudio代码中

i） 转到菜单文件→ 偏好→ 工作区设置（这将在项目根目录下生成

.vscode

目录，并初始化

设置.json

文件。）

ii）将以下

键：value

对放入

settings.json

文件中

“typescript.tsdk”：“节点\模块/typescript/lib”

在

tsconfig.json

中，将以下键：值对添加到

的“编译器选项”

{
“编译器选项”：{
“baseUrl”：“/”，
“路径”：{
“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

，您现在可以从'src/app/shared/service导入{}

如果您正在使用

webpack

和

ts loader

传输

.ts

文件，则应将以下内容添加到

webpack.config.js

配置文件的

resolve

部分

解析：{
扩展名：[''，'.js'，'.ts']，
别名：{
“src”：path.resolve（'./src'）
}
}

---

有关绝对模块分辨率，请参阅。

如果您已正确设置路径：

{
…
“编译器选项”：{
…
“baseUrl”：“，
“路径”：{
“~/*”：[“app/assets/javascript/*”]，
“*”：[“node_modules/*”，“app/assets/javascript/packs/*”]
}
}
}

如果您仍然有问题，可以尝试重新加载Visu