从深度嵌套的目录结构中导入模块

Question

导入不在同一文件夹内或周围的模块是一件很麻烦的事情。你必须一直数“../”。就像下面的例子：

import {AnswersService, AddAnswerModel, Answer} from '../../../../../../../BackendServices/AnswersService';

通过将我的 System.config 修改为下面的示例，我可以绕过所有这些 '../' 并且代码在浏览器上完美运行。

System.config({
        packages: { 
            'app': { defaultExtension: 'js' },
            'rxjs': { defaultExtension: 'js' }
        },
        paths: {
            'rxjs/*': 'node_modules/rxjs/*',
            'BackendServices/*': 'app/BackendServices/*'
        }
    });

它将导入语句简化为下面的可管理命令。

import {AnswersService, AddAnswerModel, Answer} from 'BackendServices/AnswersService';

但是这种方法的问题是我在 Visual Studio 代码中失去了智能感知。我不确定这是打字稿问题、visual studio 代码问题还是其他问题。

有谁知道如何在不丢失智能感知的情况下使它正常工作？

Answer 1

Visual Studio 只能解析位于 node_modules 中的相对路径和模块，如 angular2/* 或 rxjs/*。

这是 TypeScript 默认的 moduleResolution ( node ) .. 你可以在 tsconfig.json 中用 'classic' 改变它 .. 但是 VS Code 将不再识别节点模块。

问题在这张工单中讨论https://github.com/Microsoft/TypeScript/issues/5039

有很多提议..但还没有实施。

Answer 2

您可以复制由 angular-cli 实现的模式，方法是在目录级别通过 index.ts 导出您希望在其他地方可用的每个组件。这样您就可以在更高级别公开嵌套组件。

这是一个例子：

parent
├── child
│   ├── child.component.ts
│   └── index.ts
├── parent.component.ts
└── index.ts

里面child/index.ts简单导出相关组件。

export { ChildComponent } from './child.component';

然后parent/index.ts可以继续导出链。

export { ParentComponent } from './parent.component';
export { ChildComponent } from './child';

注意：请注意上面的内容没有引用 child.component 文件，而是 child 目录！

child 目录的 index.ts 通过 index.ts 中的导出显示这些组件。无论您的组件嵌套有多深，都可以这样做。

最后，如果 parent/ 之外的另一个组件想要使用 parent/ 内部的任何内容，可以在最顶层轻松引用它。

import { ParentComponent, ChildComponent } from './parent';

从深度嵌套的目录结构中导入模块

Importing modules from deeply nested directory structures

typescript

ecmascript-6

visual-studio-code

angular