无法导入导出的接口 - 找不到导出

Question

我将问题减少到了这个示例：

test.model.ts

export class A {
    a: number;
}
export interface B {
    b: number;
}

test.component.ts

import { Component, Input } from '@angular/core';
import { A, B } from './test.model';
@Component({
    selector: 'test',
    template: '<h1>test</h1>'
})
export class TestComponent {
    //This works fine
    @Input() foo: A;
    //Does NOT work - export 'B' was not found in './test.model'
    @Input() bar: B;
}

当我想使用接口时，我会以下警告：

WARNING in ./src/app/.../test.component.ts
21:76 export 'B' was not found in './test.model'

但是，使用 class 是可以的。有提示吗？

update ：它似乎与此问题有点相关：https：//github.com/webpack/webpack/webpack/issues/2977

Answer 1

根本原因在于打字和转介。一旦将打字稿代码转移，接口/类型就消失了。它们不再存在于发射的文件中。

虽然删除了类型，但进口/导出不一定是。原因是存在歧义，并且编译器并不总是确定导出的东西是一种类型还是价值。

使用TypeScript 3.8及向上时，您需要在test.component.ts中使用的只是以下内容：

import { A } from './test.model';
import type { B } from './test.model';

Answer 2

您也可以通过使用Typescript 3.8中的新功能来解决该问题，称为仅类型的导入和导出。

因此，这意味着您可以像这样导入有问题的类型A：

import { B } from './test.model';
import type { A } from './test.model';

还请注意，Angular似乎仅支持Angular 9.1及以上的TypeScript 3.8。

我还建议阅读此"利用类型的输出和输出键入3.8"帖子以获取更多详细信息。

Answer 3

昨天我在这里找到了另一个问题，并将其声明输出接口的解决方案单独的文件。每个文件都有一个接口，它对我有用，没有任何警告。

Answer 4

删除警告的另一种方法是与自身界面结合的略微令人讨厌的骇客。

@Input() bar: B | B;

Answer 5

这对我有用：

@Input() bar: B | null;

使用Angular 4.4.3 打字稿2.3.4

Answer 6

我有一个错误，其接口在其自己的myinterface.ts文件中定义，然后运行业力测试。运行ng serve时，我看不到问题。在myinterface.ts文件中添加1个未使用的const的export解决了问题：

export interface IMyInterface {
    ...
}
export const A = 'A';