TypeScript中的自定义装饰器
是一种特殊的语法，用于修改类、方法、属性或参数的行为。装饰器可以在不修改原始代码的情况下，给它们添加额外的功能或元数据。
装饰器可以应用于类、方法、属性和参数。在TypeScript中，装饰器由@符号紧跟在被修饰的目标之前，并且可以接受参数。
装饰器的分类：
- 类装饰器：应用于类的装饰器，可以用来修改类的行为或元数据。例如，可以使用类装饰器来添加日志记录、验证或路由功能。
- 方法装饰器：应用于类的方法的装饰器，可以用来修改方法的行为或元数据。例如，可以使用方法装饰器来添加缓存、日志记录或权限验证。
- 属性装饰器：应用于类的属性的装饰器，可以用来修改属性的行为或元数据。例如，可以使用属性装饰器来实现属性的访问控制或数据验证。
- 参数装饰器：应用于函数或方法的参数的装饰器，可以用来修改参数的行为或元数据。例如，可以使用参数装饰器来实现参数的校验或注入依赖。
自定义装饰器的优势：
- 可重用性：自定义装饰器可以在多个地方重复使用，提高了代码的可维护性和可复用性。
- 解耦合：通过使用装饰器，可以将不同的功能分离开来，使代码更加模块化和可扩展。
- 可读性：装饰器可以提供更加清晰和易于理解的代码结构，使代码更具可读性和可维护性。
自定义装饰器的应用场景：
- 日志记录：可以使用装饰器来自动记录方法的调用日志，包括方法名、参数和返回值等信息。
- 权限验证：可以使用装饰器来验证用户的权限，例如检查用户是否具有执行某个方法的权限。
- 缓存：可以使用装饰器来实现方法的结果缓存，提高系统的性能。
- 路由映射：可以使用装饰器来自动将方法映射到对应的路由上，简化路由配置的过程。
腾讯云相关产品和产品介绍链接地址： 腾讯云提供了一系列云计算相关的产品和服务，包括云服务器、云数据库、云存储等。以下是一些与云计算相关的腾讯云产品和产品介绍链接地址：
- 云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。产品介绍链接
- 云数据库MySQL版（CDB）：提供高可用、可扩展的关系型数据库服务。产品介绍链接
- 云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各种类型的数据。产品介绍链接
- 人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
- 物联网（IoT）：提供全面的物联网解决方案，包括设备接入、数据管理和应用开发等。产品介绍链接
- 区块链（BCBaaS）：提供安全可信的区块链服务，支持快速搭建和部署区块链应用。产品介绍链接
以上是腾讯云提供的一些与云计算相关的产品和服务，可以根据具体需求选择适合的产品来支持云计算领域的开发和运维工作。
相关·内容
我试图在一个没有包含在类中的函数中添加一个自定义的TypeScript装饰器，似乎无论我做什么编译器都会报错。
有什么想法吗？有可能吗？
浏览 0提问于2016-05-30得票数 32
回答已采纳
我在TypeScript中有以下小类，其中包含一些公共字段：
class Company {
@dataMember
public name: string;
@dataMember
public people: Person[];
}
class Person {
// ...
}
通过使用，我可以确定公司属性名称和人员的类型:它们分别是构造函数字符串和数组，这是预期的和逻辑的。
我的房产装饰师的职能：
function decorate(target: Object, propertyKey: string | symbol): void {
浏览 3提问于2016-01-26得票数 13
回答已采纳
我最近开始在Range2中使用，但现在我一直在想，它们是否也可以在没有TypeScript注释的情况下在ES6中使用。
TypeScript语法，按照，如下所示：
@ViewChild(ItemDirective) viewChild: ItemDirective;
或者，按照
// myVideo == #my-video
@ViewChild('myVideo') myVideo: any;
现在，对应的有用于ViewChild和co的元数据类，我记得可以使用这些元数据类在普通JS中添加一些其他注释。所以我觉得应该是可行的，但我不太确定在这种情况下该怎么做。有人能弄清楚这件
浏览 2提问于2016-02-07得票数 2
回答已采纳
因此，我尝试在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
回答已采纳
我有一个简单的数据模型，我想用元数据对其进行注释 export class Certification {
title: string;
certificationType?: CertificationType;
validTo?: number;
description?: string;
externalIdentifier: Guid;
constructor() {
this.title = '';
this.certificationType = CertificationType.
浏览 19提问于2020-04-29得票数 0
回答已采纳
我发现Karma js测试的设置和编写有些麻烦，并且发现自己经常因为这个原因而忽略了编写测试，所以我想知道是否有更好的替代方案。
因为我使用typescript，所以我的梦想场景是如果我能写出这样的东西：
module adder {
export function add(a, b){
return a + b;
}
}
[Tests]
assert.equal(4, adder.add(2, 2));
我的测试是内联的，当当前文件发生变化时，将直接在我的编辑器中运行。因为typescript可以很容易地从最终输出中删除测试，所以我可以将测试放在与代码相同的文
浏览 1提问于2016-09-22得票数 2
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
回答已采纳
我跟不上javascript中的装饰器。
我真的很想在我的React Native项目中使用它们，它会让我拥有更具可读性的代码。
但是目前(2020年)使用纯Javascript装饰器安全吗？当EcmaScript说装饰者在未来可能会有突破性的变化时，他们是什么意思？
我已经看到一些人使用装饰器，但是使用Typescript，我必须使用Typescript才能拥有一个“稳定”版本的装饰器吗？
浏览 5提问于2020-08-08得票数 0
我尝试将@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
我现在正试着把我的头转过来。我目前正在寻找服务，我也在使用typescript编写代码。
现在，从网络上的示例中，我已经看到人们在typescript中使用类似于以下内容的服务。
class Service
{
constructor( private $http: ng.IHttpService )
{
}
public MyMethod()
{
this.$http.get( "/" )
.success( null )
.error( null );
}
}
浏览 1提问于2013-10-09得票数 11
回答已采纳
1回答
有没有一种在TypeScript中进行代码编织的方法？
我想要做的是将一段代码作为我的TypeScript应用程序中每个函数的第一行，并且我不习惯手动这样做(这种手工方法既乏味又容易出错)。
浏览 1提问于2016-02-11得票数 4
回答已采纳
3回答
我有TypeScript NestJS项目。
我需要验证传入的DTO到我的API。它可以被描述为“创建项目”，在这里我们有类型的建筑(房屋、公寓、花园)，根据这种类型，我们需要定义：
楼:楼层，包括房间
平房:房间
花园:什么都没有(这是一个“房间”)
房屋类型的例子：
{
type: HOUSE,
floors: [
{
name: "1st floor",
rooms: [
{
name: "bedroom"
}
]
}
]
浏览 5提问于2020-02-14得票数 7
类型记录常说："TypeScript是JavaScript的类型化超集。“
但是，如果ECMAScript添加一些与TypeScript现有语法相冲突的新语法，TypeScript和JavaScript之间的“超集”关系就会中断。
会发生这种事吗？
例: TypesScript有参数解码器语法，如果ECMASript将来也添加参数解码器语法，但是装饰函数有不同的参数。
浏览 7提问于2022-05-25得票数 1
回答已采纳
我正在尝试允许用户从活动列表中删除项目。我想从应用程序的item组件中发出一个事件，然后可以在根组件中使用它。当单击列表项上的delete按钮时，什么也没有发生，我不确定为什么...
下面是列表组件html：
<div class="row">
<div class="new-item">
<p class="desc">{{item.desc}}</p>
<p class="start">{{item.start}}</p&
浏览 2提问于2020-02-29得票数 0
TypeScript中的“装饰器”是什么？为什么要使用它们？@符号的用途是什么？如果我们应用装饰器，会发生什么？
我在谷歌上也找不到清晰的想法。
浏览 10提问于2017-02-24得票数 0
回答已采纳
我想知道为什么TypeScript中的这个特性叫做Decorator
它只是一个与Annotation或Attribute不同的名字吗？还有别的原因吗？
Decorator和Annotation/Attribute的区别是什么？
浏览 5提问于2016-04-30得票数 14
回答已采纳
由于我更新到了角5和@ngtools/webpack (从1.8.0到1.9.0)，我得到了一个奇怪的错误，无法找出错误的原因，我只得到了这个错误：
ERROR in : TypeError: Cannot read property 'getTsProgram' of undefined
at AngularCompilerPlugin._getTsProgram (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/node_modules/@ngtools/webpack/src/angul
浏览 0提问于2017-12-08得票数 2
回答已采纳
我正在尝试创建一个react类装饰器，它向任何react组件添加一些道具，并返回装饰器中包含当前道具和额外道具的装饰组件。
我能够找到一个常规typescript类装饰器的工作代码，可以在typescript的上找到。但是，这是针对泛型类的。它不包含任何react类型。
下面是我想用React和Typescript实现的类似功能：
@AddOtherProps
class BasicComponent extends React.Component {
static defaultProps = {
someProp: ''
};
construct
浏览 17提问于2018-08-30得票数 2
2回答
我想知道是否可以使用TypeScript 1.5从一个类创建一个属性装饰器？我的意思是从
function Inject(value = null) {
return function (target:Object, propertyKey:string) {
target[propertyKey] = value;
};
}
到像这样的类
class Inject{...}
如果这是可能的，我们怎么做？
感谢你的预支
浏览 1提问于2015-06-03得票数 1
我正在使用来在我的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
回答已采纳
我是一名有打字稿的大一新生。我不理解我的代码中的这个错误。
我使用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
回答已采纳
1回答
我有一个简单的TypeScript tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"experimentalDecorators": true,
...
以及使用装饰器的类：
class MyClass {
@myDecorator()
myField: any;
}
装饰器使myField作为使用__decorate函数的属性发出，myDecorator函数被传递给它。
升级到最新版本(4.2.4)后，它在Visual
浏览 1提问于2021-08-26得票数 0
我想创建一个通用的TypeScript类，用于呈现(作为HTML )实现特定interface的对象数组。
例如：
class GenericListRenderer<T> {
items: T[];
constructor(listItems: T[], className?: string){
this.items = listItems;
...
}
private getPropertyNames(): string[]{
// What is the best way to access all property
浏览 3提问于2015-05-13得票数 35
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
回答已采纳
我一直在摆弄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
我用TypeScript写了很多代码，但巴别塔很少，我知道TypeScript是如何在装饰器上工作的，而且巴别塔也支持装饰器，它们的行为是一样的吗？
浏览 26提问于2018-02-12得票数 8
回答已采纳
1回答
我目前正在学习Node的TypeScript。读到关于TypeORM的文章，我发现reflect-metadata包是TypeORM工作所必需的。需要这个包的原因是什么？
浏览 0提问于2018-04-02得票数 9
回答已采纳
我正在使用typescript进行angular 2应用程序开发。
但当我们为组件或路由配置或其他地方编写代码时，我们使用"@“符号。
我的问题是这个符号是什么意思，为什么需要它？
浏览 271提问于2016-07-03得票数 32
1回答
我收到以下错误消息：
错误:解析错误:第29行:意外令牌非法
对应的代码行是mobx观察者装饰器：
@observer
class Wrapper extends Component<IProps> {
我有以下rollup.config.js：
import typescript from 'rollup-plugin-typescript2'
import jsx from 'rollup-plugin-jsx'
import pkg from './package.json'
export default {
inp
浏览 0提问于2019-06-28得票数 5
因此，考虑到angular2将支持多个呈现引擎( NativeScript，本机通过NativeScript和ReactiveNative)，那么开发过程是什么样子的呢？
是否有动态模板切换？还是应该通过子类来处理？
// TypeScript ahead
// Base component implementation
class FooComponent {
public name: string = 'my name';
public makeFormal () {
this.name = this.name.toUpperCase();
}
}
浏览 6提问于2015-11-19得票数 7
回答已采纳
我正在尝试将我的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
回答已采纳
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
回答已采纳
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
我正在尝试用一个装饰器来扩展一个类的原型，这个装饰器使用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中测试装饰器，但是当我编译ts代码时，我得到了错误 error TS1241: Unable to resolve signature of method decorator when called as an expression.
error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remov
浏览 140提问于2019-10-01得票数 0
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
我有一个Express API服务器应用程序和一个React客户端应用程序，它们都是用TypeScript实现的。我使用TypeScript接口定义了我的数据模型，并且在系统的两端都使用了这些接口。然而，TypeScript接口只是编译时特性，我还需要运行时类型检查，例如验证HTTP POST data (json)是否符合定义的数据结构。
所以我的问题是，我如何能够/应该利用TypeScript提供的功能来实现运行时对象验证？
浏览 6提问于2017-06-01得票数 5
每个typescript装饰器都需要定义这个?这是什么意思?为什么不在typescript语言中设置这个默认值，或者开发人员每次都需要编写这个。 function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {}
浏览 166提问于2019-09-23得票数 1
回答已采纳
我有一系列的类装饰器，我会在很多类中重复使用。类似于下面的内容：
@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
回答已采纳
我目前正在学习Vue、Vuex和TypeScript，我必须说，我对如何正确设置Vuex商店感到有点困惑。文档根本不包括TypeScript实现(我觉得文档通常缺乏基本的TypeScript示例？)是什么让我(又一次！)在正式文档之外的其他页面上寻找解决方案(如果一项新技术是通过官方资源直接学习的，就不应该出现这种情况，因为它应该包含使该技术正常工作所需的所有信息，对吗？！)
因此，当我在万维网上寻找解决方案时，我发现了以下模式：
在上，他们使用来自vuex-module-decorators的装饰器将Vuex存储模块定义为类。然后，他们再次使用装饰器，但这次是从vuex-class，访问
浏览 2提问于2020-09-21得票数 0
回答已采纳
1回答
因此，我正致力于在nestjs中开发一个CRUD服务器，使用Mongo作为数据库，并尝试通过执行@Decorator(this.connection)将可以从服务构造函数(@InjectConnection() private connection?: mongoose.Connection)获得的数据库连接注入到装饰器中。这是不可能的，因为装饰器工厂在初始化到数据库的连接之前运行。因此，每次使用装饰器时，连接都是未定义的。对于这种情况，有没有解决办法？我真的不想使用typescript装饰器来实现这个解决方案。
浏览 2提问于2020-02-29得票数 0
我正在使用Typescript创建一个WebSocket服务器，不同的应用程序组件应该能够在其中注册自己的请求处理程序。有一个单例WebsocketHandler提供了这种行为。 没有装饰器，类可以像这样注册它的请求处理程序： class ListOfStuff {
private list = [];
constructor() {
//Register listLengthRequest as a request handler
WebsocketHandler.getInstance().registerRequestHandler('getListL
浏览 18提问于2020-04-26得票数 3
回答已采纳
目前，我正在开发Angular 2。我必须演示Angular 2提供的所有功能。我面临的问题是DI issue.Dependency注入无法工作。
这是我的system.config.js
(function (global) {
var map = {
'@angular': '/node_modules/@angular', // sufficient if we didn't pin the version
'@service': '/scripts/app.service',
'
浏览 0提问于2016-09-14得票数 0
回答已采纳
来自TypeScript
因此，当对TypeScript中的单个声明评估多个装饰器时，将执行以下步骤：
每个装饰器的表达式都被计算为top-to-bottom.。这个
然后，将结果作为bottom-to-top.的函数调用。
问题
我有两个装潢师，其中一个靠另一个：
示例
@test()
@testCase({...})
public doSomething(): void {
}
@testCase()依赖于@test()，因为在测试用例可以添加到测试之前，需要将测试添加到测试运行程序中。
我可以做..。
@testCase({...})
@test()
publi
浏览 0提问于2018-04-03得票数 3
回答已采纳
嗨，我正在使用Vue 3和Typescript和Class组件。我只是从文档中复制粘贴了示例，但看起来Typescript有问题： TS1238: Unable to resolve signature of class decorator when called as an expression.
This expression is not callable.
Type 'typeof import(".../node_modules/vue-class-component/dist/vue-class-component")' has no
浏览 1759提问于2020-09-17得票数 14
回答已采纳
1回答
这是我得到的错误
./src/core/providers/todoApi/TodoApiProvider.ts 10:14模块解析失败:使用这些加载程序处理了意外字符“@”(10:14)文件：
./node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/babel- loader /lib/index.js您可能需要一个额外的加载器来处理这些加载程序的结果。类TodoApiProvider {
构造函数(@injec
浏览 10提问于2021-10-20得票数 1
HTML代码
<form #pharmacyForm="ngForm" name="form" novalidate>
//form controls
<button (click)="onSubmit(pharmacyForm)">Save</button>
</form>
TypeScript代码
onSubmit(pharmacyForm){
const controls = pharmacyForm.controls;
for(const name in c
浏览 9提问于2020-05-21得票数 0
回答已采纳
我正在修改一些位于两个已建立的层之间的代码，并且在找出最好的设计时遇到了麻烦。
当前，代码调用一个文件访问库，并将一个对象返回给调用者。我需要扩展返回的对象以添加一些自定义的dispose功能。我不能访问传递的对象的定义(例如，有些是文件流)
如果我可以创建一个子实例，它的行为类似于基本实例，并且可以从基本实例创建，但它具有一些隐藏的额外功能，这将为我节省大量工作。在不知道基类的实现细节的情况下，可以做到这一点吗？
在代码形式中，看起来很像这样：
private class FileObjectWithDispose : FileObject, IDisposable
{//voidactio
浏览 1提问于2012-09-05得票数 2
回答已采纳
是否有任何命名约定，或代码片段编辑，或任何VS代码扩展或任何NPM库来标记到标记覆盖typescript中的方法。它在进行代码审查时很有用。
就像Java中覆盖语法一样
@override << ###### SOMETHING like this ######
@public String toString(){
// your overridden code.
return something;
}
浏览 0提问于2020-09-16得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
