TypeScript里的装饰器

作者: 奥特曼_ | 来源:发表于2017-03-12 18:18 被阅读677次

如果想让Angular2支持实验性的装饰器特性,需要在tsconfig.json文件里启用experimentalDecorators编译器选项。

{
 "compilerOptions": {
     "target": "ES5",
     "experimentalDecorators": true
   }
}

装饰器

语法: @expressionexpression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

定义@test装饰器:

function test(target) {
       // do something with "target" ...
      // target就是所要修饰的目标类
}

类装饰器

类装饰器在类声明之前被声明,类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。

类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。

如果类装饰器返回一个值,它会使用提供的构造函数来替换类的声明。

首先定义一个装饰器:

function name(target) {
      target.name = '小m'
}

在类中使用:

@name
class MyNameClass{}
console.log(MyNameClass.name)    //小m

装饰器工厂

装饰器工厂就是一个简单的函数,它返回一个表达式,以供装饰器在运行时调用。

使用方法:

function isName(name) {
    return function(target) {
        target.name = name
    }
}

@isName('小m')
class MyNameClass{}
MyNameClass.name        // 小m

相关文章

  • TypeScript基础入门之装饰器(三)

    转载 TypeScript基础入门之装饰器(三) 继续上篇文章[TypeScript基础入门之装饰器(二)] 访...

  • TypeScript里的装饰器

    如果想让Angular2支持实验性的装饰器特性,需要在tsconfig.json文件里启用experimental...

  • TS装饰器初体验,用装饰器管理koa接口

    typescript中的装饰器有很多种,比如类装饰器、方法装饰器、属性装饰器等等,先看看装饰器的定义吧,下面以类装...

  • 如何配置React项目直接使用TypeScript包(babel

    上期我们说到了TypeScript装饰器(decorators)和JavaScript装饰器编译出的代码不同,我们...

  • 迁移React项目至TypeScript(babel版)

    上期我们说到了TypeScript装饰器(decorators)和JavaScript装饰器编译出的代码不同,虽然...

  • TypeScript基础入门之装饰器(二)

    转发 TypeScript基础入门之装饰器(二) 装饰器求值 如何应用装饰器应用于类内的各种声明的顺序: 对每个实...

  • 【TypeScript】装饰器

    在看VSCODE源码的时候,看到这样一部分代码: 疑惑之际,查看一下官方文档:https://www.tslang...

  • TypeScript装饰器

    装饰器是一种特殊类型的声明,它可以用在类声明、方法、属性或者参数上。顾名思义,它是用来给附着的主体进行装饰,添加额...

  • Typescript装饰器

    装饰器主要用于将一些常用操作进行抽象出一层对类,方法,属性,参数进行修饰的函数。常用例子:设置属性时,打日志等。 ...

  • 装饰器 TypeScript

    装饰器 : 装饰器是一种特殊类型的声名 。它能够被附加到类声明,方法,属性或参数上 , 可以修改类的行为。 通俗的...

网友评论

    本文标题:TypeScript里的装饰器

    本文链接:https://www.haomeiwen.com/subject/pzfxnttx.html