angular - 无法导入导出的接口(interface) - 找不到导出

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;

}

当我想使用接口(interface)时，我收到以下警告:

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 和转译。一旦 TypeScript 代码被转译，接口(interface)/类型就消失了。它们不再存在于发出的文件中。

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

当使用 TypeScript 3.8 及更高版本时，您需要在 test.component.ts 中做的就是:

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