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'

但是，使用类是可以的。任何提示？

更新：似乎与此问题有某种关联：https://github.com/webpack/webpack/issues/2977

Answer 1

昨天我在这里找到了另一个问题，解决方法是将导出的接口声明为一个单独的文件。每个文件有一个界面，它对我有用而没有任何警告。

Answer 2

删除警告的另一种方法是a union of the interface with itself稍微令人反感的黑客攻击。

@Input() bar: B | B;

Answer 3

根本原因是打字稿和翻译。编译TypeScript代码后，接口/类型将消失。它们不再存在于发出的文件中。

虽然删除了类型，但不一定要导入/导出。原因是模棱两可，而且编译器并不总是确切地知道导出的内容是类型还是值。

在使用TypeScript 3.8及更高版本时，在test.component.ts中要做的只是以下事情：

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

Answer 4

您还可以通过使用Typescript 3.8中名为Type-Only Imports and Exports的新功能来解决此问题。

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

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

还要注意，Angular似乎仅支持Angular 9.1 and above中的Typescript 3.8。

我还建议您阅读this "Leveraging Type-Only imports and exports with TypeScript 3.8" post for more details。

Answer 5

这对我有用：

@Input() bar: B | null;

使用Angular 4.4.3 + Typescript 2.3.4

Answer 6

我在自己的myinterface.ts文件中定义了接口并运行Karma测试时遇到此错误。运行ng serve时看不到问题。向export文件中再添加1个myinterface.ts的未使用const解决了该问题：

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

无法导入导出的界面 - 未找到导出

6 个答案: