打字稿中@符号的含义--Angular 2

Posted 2023-02-23

【中文标题】打字稿中@符号的含义--Angular 2

【英文标题】：What is meaning by @ symbol in typescript --Angular 2

【发布时间】：2016-11-05 07:37:08

【问题描述】：

我正在使用 typescript 进行 Angular 2 应用程序开发。

但是当我们为组件或路由配置或其他地方编写代码时 我们使用“@”符号。

我的问题是这个符号是什么意思，为什么需要它？

【参考方案1】：

这意味着你正在应用一个装饰器。

随着 TypeScript 和 ES6 中类的引入，现在存在某些需要附加功能来支持注释或修改类和类成员的场景。装饰器提供了一种为类声明和成员添加注释和元编程语法的方法。装饰器是 javascript 的第 1 阶段提案，可作为 TypeScript 的实验性功能使用。

How to implement a typescript decorator? https://www.typescriptlang.org/docs/handbook/decorators.html

【讨论】：

我已经阅读了@Gunter 提供的参考链接，发现它只是一些在运行时注入实际代码的代码......但是要注入它，我们使用前面带有@的函数名称符号，以便 Typescript 理解它是装饰器，在转换时或以后应该小心。如果我错了，请纠正我。

装饰器可以被静态解释（无需实际运行代码）Angular 使用它在构建时生成代码（离线模板编译器）和工具支持，如模板中的自动完成（两者都在进行中）。

利用这个问题......为什么他们决定在他们的 npm 包上也加上“@”符号？导入“@angular/core”等...

据我所知，这是一个 NPM 功能，并创建了一个保留的命名空间，只有 Angular 团队可以向其中发布包。

【参考方案2】：

您所指的@ 符号称为decorator。

装饰器提供了一种为类声明和成员添加注释和元编程语法的方法。

基本上，当您执行@component 时，您是在告诉编译器该类是一个 angular2 组件，元数据作为参数传递。

例如。

@Component(
  moduleId: module.id,
  selector: 'heroes-app',
  templateUrl: 'heroes.component.html',
  styleUrls: ['heroes.component.css'],  
)
class HeroesComponent

这段代码将告诉编译器类 HeroesComponent 应该是一个 angular2 组件，元数据作为参数传递，它将创建一个组件类。

装饰器不是魔法。这只是函数调用。

例如。

@Component(
selector: 'static-component',
template: `<p>Static Component</p>`
)
class StaticComponent 

相当于：

class DynamicComponent 


const dynamicComponent = Component(
    selector: 'dynamic-component',
    template: `<p>Dynamic Component</p>`
)(DynamicComponent);

希望这会有所帮助。

【讨论】：

关于您的“等价示例”：您是说装饰真的将“静态”变为“动态”还是只是示例中的不一致？

@bluenote10 这只是我的命名错误