从 Angular 模块导出 Typescript 接口答案

【问题标题】：Export Typescript interface from Angular module从 Angular 模块导出 Typescript 接口
【发布时间】：2020-11-08 07:58:16
【问题描述】：

我有一个 Typescript 界面 IBreadcrumbNavigation 我正在导出。我可以在带有import { IBreadcrumbNavigation } from 'app/shared/interfaces/breadcrumbNavigation';的Angular组件中使用它

但是，组件的模块已经导入了SharedModule。我想把IBreadcrumbNavigation接口放在SharedModule里面，这样我就不需要显式地把它导入到每个想要使用它的组件中了。

在我的SharedModule 我有

import { IBreadcrumbNavigation } from './interfaces/breadcrumbNavigation';

@NgModule({
    declarations: [
        IBreadcrumbNavigation
    ],
    exports: [
        IBreadcrumbNavigation
    ]
})
export class SharedModule { };

TypeScript 给出错误“'IBreadcrumbNavigation' 仅指一种类型，但在此处用作值。”

如果我将IBreadcrumbNavigation 从接口更改为类，错误就会消失。

有什么好的解决办法，还是我只需要将接口直接显式导入到每个组件中？

【问题讨论】：

我们能看到组件模块吗

标签： angular typescript

【解决方案1】：

如果不是组件、管道、指令、模块，你只需要在模块中导入你想要的接口即可。接口必须导出

在'./interfaces/breadcrumbNavigation';

export interface IBreadcrumbNavigation {
   ...
}

在其他模块的 x 组件中，您只需导入接口

import { IBreadcrumbNavigation } from 'pathToOtherModule/interfaces/breadcrumbNavigation';

【讨论】：

【解决方案2】：

有什么好的解决办法吗，

就像错误消息说的那样，接口实际上并没有声明任何在运行时存在的东西。它们纯粹在 TypeScript 的编译时存在并被删除。所以把它们放在一个装饰器的数组中是没有意义的，因为它们确实在运行时存在。

听起来转换为类可以解决问题，但您可能应该导出这些接口的具体实现者。

From the docs:

添加declarable 类 — 组件、指令和管道 — 到 declarations 列表。

恰好在应用程序的一个模块中声明这些类。如果它们属于这个模块，则在这个模块中声明它们。

我是否只需将接口直接显式导入到每个组件中？

您确实需要这样做 - 请记住，NgModule 不会自动为您导入其他 ECMAScript/TypeScript 模块。在模板之外，您必须自己处理。

【讨论】：

【解决方案3】：

这是不可能的，因为它们存在于运行时，一种解决方法是导出 IBreadcrumbNavigation 而不是 Import

export{ IBreadcrumbNavigation } from './interfaces/breadcrumbNavigation';

@NgModule({
    declarations: [
        IBreadcrumbNavigation
    ],
    exports: [
        IBreadcrumbNavigation
    ]
})
export class SharedModule { };

然后创建一个公共 api 文件来像这样访问它

export * from './lib/SharedModule ';

然后在你可以这样做的组件上

import {IBreadcrumbNavigation } from 'publicApi';

【讨论】：