我一直认为TypeScript中的装饰器是在类的构造函数之后调用的.但是,我被告知,例如,这篇文章的最高答案声称在声明类时调用Decorator,而不是在实例化对象时调用.我注册的Angular课程的Udemy讲师也告诉我,Typescript中的装饰器在属性初始化之前运行.
但是,我在这个问题上的实验似乎表明不是这样.例如,这是一个带有属性绑定的简单Angular代码:
test.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-test',
template: '{{testString}}'
})
export class TestComponent{
@Input() testString:string ="default string";
constructor() {
console.log(this.testString);
}
}
app.component.html
<app-test testString="altered string"></app-test>
当我执行代码时,控制台记录"默认字符串"而不是"更改字符串".这证明了在类的构造函数执行后调用decorator.
有人可以给我一个明确的答案,说明何时调用装饰器？因为我在网上的研究与我做的实验相矛盾.谢谢!
我认为我在这里的理解中遗漏了一些相当重要的东西，所以也许一点解释也会非常有帮助。
我有一堂课，如下：
class Entity {
protected pos: number = [0,0];
...
public setPos(x: number, y: number) {
this.pos = [x, y];
}
}
想要类似的东西
class EntityPositionListener {
//do stuff when an Entity position changes
}
我也有Entity班级的后代。因此，每当任何后代Entity或其Entity本身更改pos变量（在给定实例中）时，我都想知道它，以便我可以更新地图上的位置，并捕获实例，以便理论上我可以做其他事情事情到那个例子。
我注意到 Firefox 有这个Object.watch()命令，并且我找到了有人在另一个问题中发布的“跨浏览器”解决方案 - 无济于事 - 并且我尝试Entity在初始化后阶段“包装”该类，但是后者最终会覆盖Entity类或创建无限循环，所以我显然在某个地方错过了重点。如果包装是答案，我该如何在 TypeScript 中做到这一点？JS 版本创建了循环或不起作用。
//This created an infinite loop in runtime, but more importantly overwrote the Entity class
function EntityListener(name) {
cout(name);
}
var …我在新的ASP.NET核心项目类型中使用TypeScript.
我们积极使用装饰器.
不幸的是,这会导致VS2015输出中的大量错误:
Error TS1219 Experimental support for decorators is a feature that is subject to change in a future release.
Specify '--experimentalDecorators' to remove this warning.
WebApplication2 d:\documents\visual studio 2015\Projects\WebApplication2\src\WebApplication2\wwwroot\sources\app.ts 9 Active
在常规ASP.NET项目修改*.csproj文件中摆脱这些错误消息非常简单.
但ASP.NET Core项目不使用.csproj,而是使用它.xproj.
那么,如何在ASP.NET Core项目中允许VS2015中的实验性TypeScript装饰器支持？
您可以找到最简单的项目,它可以在github示例代码中重现问题
给定下面的脚本，可以在Angular 2 官方教程中找到，“@”字符是什么意思？这是 ecmascript 6 的功能吗？
谁能详细说明一下吗？
import {Component} from 'angular2/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
`
})
export class AppComponent {
public title = 'Tour of Heroes';
public hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
我正在尝试实现一个 Typescript 方法装饰器，如下所示。
function dataMethod(name: string, options: any) {
return (target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) => {
}
}
其使用如下。
class HelloWidgetExtesion {
@dataMethod("getData", {})
public getData(name: any, cb: any) {
cb(null, "");
}
}
但我试图弄清楚如何使用装饰器和箭头函数实现，如下所示。
class HelloWidgetExtesion {
@dataMethod("getData", {})
public getData = (name: any, cb: any) => {
cb(null, "Greetings from Loopback!");
}
}
但是上面的实现在编译的时候显示如下错误。
错误 TS2322：类型“（目标：任何，propertyKey：字符串，描述符：TypedPropertyDescriptor）=> void”不能分配给类型“（目标：对象，propertyKey：字符串 | 符号）=> void”。
我正在尝试在 Typescript 中实现一个类装饰器。所以我有一个将类作为参数的函数。
const decorate = function ()
{
return function ( target: any )
{
return class myExtendClass extends target{}
};
};
目标是像这样使用它：
@decorate()
class Something{}
不幸的是我得到了type any is not a constructor function type。知道如何实现我想要的吗？