Typescript中的类装饰器
是一种特殊的装饰器，用于修改或扩展类的行为。它是一种函数，可以在类声明之前被声明，并通过@符号应用于类。类装饰器可以接收一个参数，该参数是一个构造函数，用于访问类的元数据。
类装饰器可以用于以下几个方面：
- 修改类的行为：通过在类装饰器中修改类的原型，可以添加、修改或删除类的属性和方法。这样可以在不修改原始类代码的情况下，对类进行扩展或修改。
- 注入依赖：类装饰器可以用于注入依赖项，例如通过依赖注入容器将服务注入到类中。
- 日志记录：通过类装饰器，可以在类的方法执行前后添加日志记录的逻辑，用于跟踪方法的调用和执行时间。
- 路由映射：在Web应用程序中，类装饰器可以用于将类与特定的路由路径和HTTP方法映射起来，从而实现路由功能。
- 权限控制：通过类装饰器，可以在类的方法执行前进行权限验证，以确保只有具有特定权限的用户才能访问该方法。
在腾讯云的产品中，没有专门针对Typescript类装饰器的产品或服务。然而，腾讯云提供了一系列与云计算相关的产品，如云服务器、云数据库、云存储等，可以用于支持和扩展Typescript应用程序的开发和部署。
更多关于Typescript类装饰器的详细信息，可以参考Typescript官方文档：Class Decorators
相关·内容
我最近开始在Range2中使用，但现在我一直在想，它们是否也可以在没有TypeScript注释的情况下在ES6中使用。
TypeScript语法，按照，如下所示：
@ViewChild(ItemDirective) viewChild: ItemDirective;
或者，按照
// myVideo == #my-video
@ViewChild('myVideo') myVideo: any;
现在，对应的有用于ViewChild和co的元数据类，我记得可以使用这些元数据类在普通JS中添加一些其他注释。所以我觉得应该是可行的，但我不太确定在这种情况下该怎么做。有人能弄清楚这件
浏览 2提问于2016-02-07得票数 2
回答已采纳
TypeScript中的“装饰器”是什么？为什么要使用它们？@符号的用途是什么？如果我们应用装饰器，会发生什么？
我在谷歌上也找不到清晰的想法。
浏览 10提问于2017-02-24得票数 0
回答已采纳
我试图在一个没有包含在类中的函数中添加一个自定义的TypeScript装饰器，似乎无论我做什么编译器都会报错。
有什么想法吗？有可能吗？
浏览 0提问于2016-05-30得票数 32
回答已采纳
我正在使用来在我的web应用程序中创建一个导航条。我使用的是Vue.JS + TypeScript。
因此，我在一个文件夹"navBar“中创建了一个Vue组件，在其中我已经：
组件navBar.vue
<template src="./navBar.html">
</template>
<script src="./navBar.ts" lang="ts">
</script>
html navBar.html
<div id="navbar">
<e
浏览 0提问于2018-02-13得票数 0
回答已采纳
我一直在摆弄Typescript中的装饰器，我有一个简单的问题，假设我有一个名为RetainType的自定义装饰器和一个如下所示的类：
class Person {
@RetainType name: string;
@RetainType age: number;
@RetainType dateOfBirth: Date;
}
我希望能够这样写：
@RetainType class Person {
name: string;
age: number;
dateOfBirth: Date;
}
换句话说，有没有办法将装饰器应用于类中的所有属性
浏览 9提问于2016-08-18得票数 5
我是一名有打字稿的大一新生。我不理解我的代码中的这个错误。
我使用IProps来描述这个类的属性。为什么typescript要检查这个类的方法？我该如何解决这个问题？
export interface IProps extends FormComponentProps {
dispatch: Dispatch<any>;
loading: any;
}
@Form.create()
@connect(({ global, loading }) => ({ global, loading }))
expor
浏览 1提问于2018-09-14得票数 1
1回答
我很难将复杂的TypeScript对象存储到浏览器的存储中，因为它必须序列化为JSON字符串。
class ComplexObject {
constructor(
public date: Date,
public child: SimpleObject,
) {}
getContent() {
return this.child.content
}
}
class SimpleObject {
constructor(
public content: string,
) {}
}
虽然const store = JSON.stri
浏览 1提问于2018-03-03得票数 2
回答已采纳
我正在使用typescript进行angular 2应用程序开发。
但当我们为组件或路由配置或其他地方编写代码时，我们使用"@“符号。
我的问题是这个符号是什么意思，为什么需要它？
浏览 271提问于2016-07-03得票数 32
1回答
有没有一种在TypeScript中进行代码编织的方法？
我想要做的是将一段代码作为我的TypeScript应用程序中每个函数的第一行，并且我不习惯手动这样做(这种手工方法既乏味又容易出错)。
浏览 1提问于2016-02-11得票数 4
回答已采纳
2回答
我想知道是否可以使用TypeScript 1.5从一个类创建一个属性装饰器？我的意思是从
function Inject(value = null) {
return function (target:Object, propertyKey:string) {
target[propertyKey] = value;
};
}
到像这样的类
class Inject{...}
如果这是可能的，我们怎么做？
感谢你的预支
浏览 1提问于2015-06-03得票数 1
1回答
在 on AdonisJS中，Post类定义包括@column节。有人能解释一下这是怎么回事吗？我假设它是在Post类中创建多个'column‘类实例，作为成员变量，每个实例具有不同的名称和数据类型。但是这是如何工作的，“符号”是什么意思呢？
import { column, BaseModel } from '@ioc:Adonis/Lucid/Orm'
export default class Post extends BaseModel {
@column({ isPrimary: true })
public id: number
浏览 0提问于2021-08-04得票数 2
回答已采纳
每个typescript装饰器都需要定义这个?这是什么意思?为什么不在typescript语言中设置这个默认值，或者开发人员每次都需要编写这个。 function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {}
浏览 166提问于2019-09-23得票数 1
回答已采纳
我想知道为什么TypeScript中的这个特性叫做Decorator
它只是一个与Annotation或Attribute不同的名字吗？还有别的原因吗？
Decorator和Annotation/Attribute的区别是什么？
浏览 5提问于2016-04-30得票数 14
回答已采纳
2回答
我尝试使用vue-injector，但它使用我的Vue (2.6.10)和Typescript (3.4.5)版本编译。 我几乎看不到其他选择。 在纯粹的typescript方面，我看到了像Inversify和TSyringe这样的东西，它们看起来很好，但不能开箱即用。 这是inversify： Argument of type typeof App' is not assignable to parameter of type 'VueClass<Vue>'.
Type 'typeof App' is not assignab
浏览 99提问于2019-05-23得票数 0
我正在尝试用一个装饰器来扩展一个类的原型，这个装饰器使用TypeScript的experimentalDecorator支持。
export function Foo() {
return function (target) {
target.prototype.bar = 'baz';
}
};
虽然这个装饰符似乎适用，但TypeScript不能识别原型扩展。
@Foo()
class Qux {
constructor () {
this.bar; // Property 'style' doesn't exi
浏览 13提问于2016-09-01得票数 0
回答已采纳
我发现这取决于我把类放在TypeScript上的顺序，javascript不会生成棱角的__decorate函数，TypeScript的bug对吗？还是我做错了？
控制台上的错误，platform-Browser.umd.js:2306 2306EXCEPTION: AppComponent上没有指示注释
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1
浏览 3提问于2016-06-17得票数 1
回答已采纳
我正在学习在Angular 2+中使用的Typescript中的装饰器。我知道装饰器只是简单的函数。
我发现有时候装饰器必须返回一个函数，而有时逻辑是在装饰器函数内部执行的，而不需要返回任何东西。
考虑一下类装饰器
@course
class Person {
constructor() {
console.log("Test")
}
}
装饰者课程定义如下。它定义了Person.prototype的一些属性。它不返回任何内容。
function course(target) {
Object.defineProperty(target
浏览 0提问于2017-10-22得票数 0
嗨，我很想知道这是否可能得到所有给装饰师javascript/typescript的类。
例如，我有课
@mydecorator
class SomeClass1{
}
还有其他人在舱里
@mydecorator
class SomeClass2{
}
然后，在运行时的其他模块中，我希望得到所有具有装饰器@mydecorator的类或构造函数.恐怕这是不可能的：
export function getaAllClassesByDecorator(decorator:string){
... return constructor or something that i am able to c
浏览 3提问于2016-09-21得票数 7
回答已采纳
2回答
我想知道为什么当我在课堂上的打字稿中使用装饰符或注释时。编译器无法推断类的新类型。如果我不使用装饰器，并使用旧的方式在ES5 (即。(手动调用装饰器)它显然是有效的。
例如，这里有一个显示问题的示例：
function decorate(Target: typeof Base): IExtendedBaseConstructor {
return class extends Target implements IExtendedBase {
public extendedtMethod(): number {
return 3;
}
};
}
interf
浏览 2提问于2016-04-03得票数 5
回答已采纳
import { ObjectType, ID, Int, Field } from 'type-graphql';
@ObjectType()
export default class Address {
@Field(type => ID)
id: String;
@Field()
type: string;
@Field()
title: string;
@Field()
location: string;
} 信息: ts-node-dev ver.1.0.0 (使用ts-node版本9.1.1，typescript版本4.
浏览 61提问于2021-03-18得票数 0
因此，我尝试在lit-element中使用Typescript 但是，我不确定如何设置reflect等选项 在普通的Javascript中，你可以这样写： static get properties() { return {
test: { reflect: true }
};} 但在typescript中，您可以像这样声明属性： @property()
test : string; 但是如何添加reflect:true呢？ 如果我喜欢这样： @property()
test : {reflect: true}; 它不工作，因为它认为这是变量类型。 那么如何添加这些选项呢？
浏览 17提问于2020-08-25得票数 0
回答已采纳
基本上是。但很少有更多的要求。
如何使用属性装饰器而不是类装饰器向类添加新的属性/方法？
关键是-如何自动完成这一工作？支持TypeScript可以推断添加的键吗？在中，我们必须手动添加类型信息。TypeScript有可能推断它吗？
举个例子：
class HeaderComponent extends Vue {
// @Stream$ should add key teanantId$ to class?
@Stream$((store) => store.urlState.tenantId)
public tenantId: number;
浏览 2提问于2018-05-25得票数 0
1回答
我正试图在我的angular服务中加载一个外部typescript类。我有一个名为anyservice的服务。我在一个文件夹中创建了一个导出类，我想在我的服务中获得一个函数，我的类代码是：
export class Functions {
testy() {
alert("I am testy");
}
}
我在我的服务中调用这个函数类，使用：
import{Functions} from '../data/f'
但在我的服务中，当我尝试使用以下命令来获取它时：
constructor(private f: Functions)
我收到错误消息：
浏览 0提问于2018-06-28得票数 0
2回答
我有一个构建在带有装饰器的typescript上的应用程序，用于一些方便的属性分配，并想知道如何为它们编写单元测试。
export function APIUrl() {
return function (target: any, key: string) {
let _value = target[key];
function getter() {
return _value;
}
function setter(newValue) {
浏览 0提问于2016-08-24得票数 6
回答已采纳
像这样
enum Response {
@Descriptor("this is No")
No = 0,
@Descriptor("this is Yes")
Yes = 1,
}
如何在TypeScript中在枚举上使用装饰器，我尝试了这段代码，但它没有工作
export function Description(description:string){
return Reflect.metadata(descriptionMetadataKey, description);
}
浏览 0提问于2018-09-06得票数 14
回答已采纳
我有一个使用Vue 3、class-component和typescript的项目，我在App.vue文件中找到了语法@Option <template>
<div id="app">
<router-view />
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
name: "App
浏览 555提问于2021-04-14得票数 11
1回答
files.ts
export class ServiceUrls {
static baseUrl: string = 'http://localhost:52949/V1/';
static baseImageUrl: string = 'http://localhost:52949/';
}
filess1.ts
extends interface ServiceUrls{
static baseUrl: string = 'http://localhost:52949/V1/';
static baseImageUr
浏览 8提问于2017-05-11得票数 6
我有一个简单的数据模型，我想用元数据对其进行注释 export class Certification {
title: string;
certificationType?: CertificationType;
validTo?: number;
description?: string;
externalIdentifier: Guid;
constructor() {
this.title = '';
this.certificationType = CertificationType.
浏览 19提问于2020-04-29得票数 0
回答已采纳
1回答
类装饰器(实例级)
、、、
我试图在属性上添加一个类decorator，并在instance中修改这个属性。
这在typescript中很好，但是我不想使用typescript，只使用babel，而不使用任何其他编译器。
我的猜测是，target在el函数中是class而不是instance，而在使用typescript时并非如此。
如果有人知道如何使用babel和不使用typescript来完成这项工作
带类型记录的演示：
仅限babel演示：
function el(type) {
return function descriptor(target, key,dec) {
let value = tar
浏览 6提问于2017-12-23得票数 1
回答已采纳
1回答
在TypeScript中，我定义了一个装饰器
function Foo(type: AnEnum) {
return <T extends { pattern: RegExp, new(...args: any[]): {} }>(constructor: T) => {
RegisterPattern(pattern) // defined elsewhere
return class extends constructor {
public type: AnEnum = type
}
浏览 6提问于2018-01-11得票数 0
回答已采纳
使用Nest.js graphql的代码优先方法，我试图在有嵌套输入类型的地方创建一个变异。服务器抛出以下错误 __metadata("design:type", MenuInput)
^
ReferenceError: Cannot access 'MenuInput' before initialization
at Object.<anonymous> (.../dist/order.input.js:26:31) dist文件如下所示 __decorate([
graphq
浏览 37提问于2021-01-20得票数 0
回答已采纳
我跟不上javascript中的装饰器。
我真的很想在我的React Native项目中使用它们，它会让我拥有更具可读性的代码。
但是目前(2020年)使用纯Javascript装饰器安全吗？当EcmaScript说装饰者在未来可能会有突破性的变化时，他们是什么意思？
我已经看到一些人使用装饰器，但是使用Typescript，我必须使用Typescript才能拥有一个“稳定”版本的装饰器吗？
浏览 5提问于2020-08-08得票数 0
我有以下代码
export class TestClass {
query<TId, TRequest extends TId, TResponse extends TId>(request: TRequest) : TResponse {
return null;
}
test() {
let request = new SomeQuery1();
let response = this.query<{ "a b c" }, SomeQuery1, SomeResponse1>(
浏览 0提问于2017-05-11得票数 2
回答已采纳
在Java中，我们可以使用“类路径扫描”找到所有具有给定注释的类。
我们如何在TypeScript中做类似的事情呢？有没有办法找到所有的类都装饰了一些装饰？
浏览 2提问于2015-05-30得票数 5
回答已采纳
我正在尝试将我的TypeScript /create应用程序从MobX 5迁移到MobX 6。在官方迁移指南( )中，他们建议如下：
删除所有装饰器并调用构造函数中的makeObservable，并显式定义使用哪个装饰器应该可以观察到哪个字段。
但他们并没有说如何使用TypeScript应用程序来实现这一目标。给出的例子总是直接使用普通的JavaScript和React.RenderDOM。
下面是一个简化示例的开头--我需要迁移的一个典型类：
@observer
export default class LoginPage extends React.Component<ILogi
浏览 2提问于2021-02-19得票数 4
回答已采纳
我尝试将@Reflect.metadata装饰器应用于TypeScript类，如第82-84行中的示例所示。
/// <reference path="node_modules/reflect-metadata/reflect-metadata.d.ts"/>
@Reflect.metadata('key', 0)
class C {
}
但是，TypeScript 1.7.2编译器在@Reflect.metadata行上生成以下错误：
错误TS1238:当作为表达式调用时无法解析类装饰器的签名。
无法调用类型缺少调用签名的表达式。
怎么了
浏览 3提问于2015-12-28得票数 6
1回答
因此，我正致力于在nestjs中开发一个CRUD服务器，使用Mongo作为数据库，并尝试通过执行@Decorator(this.connection)将可以从服务构造函数(@InjectConnection() private connection?: mongoose.Connection)获得的数据库连接注入到装饰器中。这是不可能的，因为装饰器工厂在初始化到数据库的连接之前运行。因此，每次使用装饰器时，连接都是未定义的。对于这种情况，有没有解决办法？我真的不想使用typescript装饰器来实现这个解决方案。
浏览 2提问于2020-02-29得票数 0
假设我有一个类装饰器，它向一个类添加了一些方法。
function decorator(target) {
target.prototype.method = function() {};
}
@decorator
class Test {
constructor() {
this.method() <------- Property method does not exists on type Test
}
}
如果我有能力添加装饰器，但是typescript无法识别它们，那它就毫无价值了。
有办法解决这个问题吗？
浏览 1提问于2018-01-08得票数 0
我有这个错误
GraphQLError: Input Object type CreateUserInputDTO must define one or more fields.
at SchemaValidationContext.reportError
我已经尝试过一些建议，但是仍然不起作用
我不知道为什么会有这个错误，因为我有工作的另一个项目。我怀疑我可能使用了最新的模块？
这是代码
import {
Field,
InputType,
IntersectionType,
ObjectType,
OmitType,
} from '@nestjs/
浏览 11提问于2022-09-15得票数 2
回答已采纳
问题是，我想使用一个装饰方法，它从装饰器中检索一个属性，而装饰器接收方法的参数，制作一些东西，并用这些东西的结果调用装饰方法。
下面是一个示例
export function Augment(
target: any,
propertyKey: string,
descriptor: PropertyDescriptor
) {
const method = descriptor.value;
descriptor.value = function(message: string) {
return method.call(this, {
data: m
浏览 0提问于2019-11-29得票数 0
类型记录常说："TypeScript是JavaScript的类型化超集。“
但是，如果ECMAScript添加一些与TypeScript现有语法相冲突的新语法，TypeScript和JavaScript之间的“超集”关系就会中断。
会发生这种事吗？
例: TypesScript有参数解码器语法，如果ECMASript将来也添加参数解码器语法，但是装饰函数有不同的参数。
浏览 7提问于2022-05-25得票数 1
回答已采纳
我正在使用Typescript创建一个WebSocket服务器，不同的应用程序组件应该能够在其中注册自己的请求处理程序。有一个单例WebsocketHandler提供了这种行为。 没有装饰器，类可以像这样注册它的请求处理程序： class ListOfStuff {
private list = [];
constructor() {
//Register listLengthRequest as a request handler
WebsocketHandler.getInstance().registerRequestHandler('getListL
浏览 18提问于2020-04-26得票数 3
回答已采纳
我有一个示例代码，它说明了我的代码中发生的一件奇怪的事情，但我想不出为什么会发生这种情况。
基本上，我有一个简单的类Foo，它只包含一个方法。一个greet方法，在默认情况下，当被调用时，它只是记录"Hello，World“。但是我有一个装饰器应用于改变方法的方法。新函数几乎相同，但需要一个字符串参数来确定要记录的内容。
以下是我的示例的完整代码。
const arr = [];
function methodOverride(target, propertyKey, descriptor) {
descriptor.value = function(str) {
浏览 6提问于2020-10-12得票数 0
我尝试过几种不同的方法来在TypeScript中声明一个装饰函数，这样装饰类就实现了一个接口。就像这样：
interface IValidatable {
checkValidation: () => boolean;
}
function validated<T>(Class: {new():T}): {new():T & IValidatable} {
Class.prototype.checkValidation = () => true;
return Class as {new():T & IValidatable};
浏览 5提问于2017-04-18得票数 0
下面是一些关于TypeScript文档中装饰器的代码：
function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
return class extends constructor {
newProperty = "new property";
hello = "override";
}
}
@classDecorator
class Greeter {
property = "propert
浏览 1提问于2017-11-24得票数 0
回答已采纳
我有一系列的类装饰器，我会在很多类中重复使用。类似于下面的内容：
@foo
@bar
@baz
export class MyClass { /* ..... */ }
由于我在多个类中使用了这三个装饰器，因此我真的想将其分解为一个装饰器，如下所示：
@standard
export class MyClass { /* ... */ }
我尝试创建一个新的类装饰器，它像这样链接装饰器调用：
export function standard<ReturnType>(ctor: Constructor<ReturnType>) {
return baz(bar(f
浏览 14提问于2016-08-19得票数 7
回答已采纳
2回答
我正在使用angular2 2/Typescript构建一个应用程序，并试图访问作为依赖项注入的服务。在角1.x中，我可以通过控制器函数访问这个服务，所有子函数都可以访问相同的依赖项。在这里，我通过组件的构造函数注入它，如下所示：
constructor( @Inject(JRummy) rummyGame: JRummy) {
this.currentGame = new Game();
rummyGame.startGame(this.currentGame);
}
其中rummyGame是我试图注入的服务。工作正常。但是，在构造函数中访问
浏览 5提问于2016-04-30得票数 2
回答已采纳
我正在做一个项目，在这个项目中我使用了Angular 2和NodeJS以及TypeScript。
Angular2使用装饰器来定义组件。我希望能够以同样的方式表达对域对象的验证逻辑。这将是有用的，因为我可以表达验证规则一次，并使用它在服务器端和客户端。
而不是在标记中表示必填字段，如下所示：
<input required [(ng-model)]="selectedHero.name"></input>
我想这样做：
class Hero {
id: number;
@Required
name: string;
}
我正在尝
浏览 0提问于2015-12-01得票数 5
我知道Typescript是Javascript的上标。它是否只包含经过批准的ECMAScript功能？据我所知，ECMAScript收到了很多关于要包含的功能的提案，但它只批准了相对较少的功能。typescript是否只包括那些批准的，或者它是否也包括未批准的其他提案的实现？ 另外，typescript是否包含自己的功能，而这些功能根本不是ECMAScript的一部分？ 我使用typescript开发了Angular应用程序，但对它没有深入的了解。
浏览 9提问于2019-08-29得票数 1
回答已采纳
1回答
为了寻找在类型记录中不使用新的类实例化类的方法，这个很好的答案在javascript中工作得很好。
回购引用的中的代码是一个简单的类装饰器：
var classy = function classy() {
return function (Class) {
var _Class = function _Class() {
for (var _len = arguments.length, rest = Array(_len), _key = 0; _key < _len; _key++) {
rest[_k
浏览 2提问于2022-07-26得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
