为什么 Angular 组件定义接口？答案

【问题标题】：Why angular Component defined interface?为什么 Angular 组件定义接口？
【发布时间】：2019-02-08 23:47:01
【问题描述】：

我正在学习打字稿中的装饰器。

在那本书中，装饰器是一个简单的函数实现，装饰器只能获取一个参数。

就在下面。

function logger(arg:string){
    //decorator todo    
}

@logger("test")
class TestClass {}

事实上，这种结构也出现在 Angular 中。

于是我去了Angular中最常用的“组件”的定义。

但是Component的定义是接口。

右下方是Angular中定义的“组件”

directive.d.ts
//also Directive is interface too
export interface Component extends Directive {
    changeDetection?: ChangeDetectionStrategy;
    ....
}

当然，它继承了其他几个接口，但结论是Component的定义是接口。

我在 typescript 中使用了相同的示例，但没有使用 Angular 进行测试。

interface Component{
    templateUrl?: string;
    template?: string;
    styleUrls?: string[];
}

function logger(name:string){
    return function(target:Function){
        return console.log(`class Name: ${name}`);
    }
}

//@logger("BOOK")
@Component({
    selector: 'bap-select-cscV2',
    templateUrl: './csc-v2.component.html',
    styleUrls: ['./csc-v2.component.css']
  })
class BOOK{
    constructor(private title: string){}
};

我有两个问题。

首先，当我使用 @logger 而不使用 @Component 将该脚本构建到 ng-node 中时，会记录“类名：书”。

我了解装饰器是元数据。我什至没有创建一个类，但我不知道记录器为什么工作。

其次，我不知道为什么界面（命名为组件）的行为不像角度。

错误是：组件只引用一个类型，但在这里被用作值。

【问题讨论】：

标签： angular typescript

【解决方案1】：

logger 装饰器会打印到控制台，因为正在评估函数。 return console.log(``class name ${name}``); 行被评估。装饰器与 Angular 的装饰器有些不同，因为 Angular 使用 reflect-metadata 包来做反射之类的事情。

你得到的错误是因为你已经声明了一个接口并试图使用它，就好像它已经初始化了一样。在 TypeScript 中，当您定义一个接口时，它仅用于 TypeScript 来确定对象上的类型。编译 TypeScript 时，不会输出接口。

当您在 Angular 中查看 Component 装饰器的定义是一个接口时，是因为它们故意向您隐藏实现细节。他们称之为Facade。他们不希望您实际导航到它的代码，而是希望您查看Component 对象的“形状”* 是什么。

这通常是一个类型定义文件.d.ts，它将告诉 TypeScript Angular 中所有内容的类型。

*“形状”只是指对象的组成部分（方法、属性等）

【讨论】：