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

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语句减少为下面的可管理命令.

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

但是这种方法的问题在于我在Visual Studio Code中丢失了智能感知.我不确定这是打字稿问题,视觉工作室代码问题还是其他问题.

有没有人知道如何在不失去intellisense的情况下使其工作？

Answer 1

您可以复制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';

Answer 2

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

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

此票证中讨论了该问题https://github.com/Microsoft/TypeScript/issues/5039

有很多建议..但尚未实施。