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

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

根本原因在于 Typescript 和 transpilation。一旦 TypeScript 代码被转译，接口/类型就消失了。它们不再存在于发出的文件中。

虽然类型被删除，但导入/导出不一定。原因是存在歧义，并且编译器并不总是确定导出的内容是类型还是值。

使用 TypeScript3.8及更高版本时，您需要在test.component.ts就是：

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

Answer 2

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

Answer 3

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

所以这意味着你可以A像这样导入有问题的类型：

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

另请注意，Angular 似乎只支持Angular 9.1 及更高版本的Typescript 3.8 。

我还建议阅读这篇“使用 TypeScript 3.8 使用纯类型导入和导出”的帖子以了解更多详细信息。

Answer 4

消除警告的另一种方法是将接口与自身结合的稍微令人反感的黑客攻击。

@Input() bar: B | B;