码迷,mamicode.com
首页 > 其他好文 > 详细

[TypeScript] Understanding Decorators

时间:2016-06-10 18:59:57      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

Decorators are a feature of TypeScript that are becoming more and more common in many major libraries. This lesson walks you through what decorators are and how to create your own.

 

Nomarl way to decorate a object :

const Person = {name: ‘John‘};

function addAge(age){
    return function(person){
        return {
            age,
            name: person.name
        }
    }
}

const john = addAge(30)(Person);
console.log(john); // {name: "John", age: 30}

 

In Typescript, we can enable "experimentaDecorators", which is ES7 feature:

{
    "compilerOptions": {
        "rootDir": "src",
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "outDir": "./dist",
        "noEmitOnError": true,
        "experimentalDecorators": true
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

 

function addAge(age){
    return function(targetClass){
        return class{
            age = age;
            name = new targetClass().name;
        }
    }
}

@addAge(30)
class Person{
    name = "Johnn";
}

const john = new Person();
console.log(john); // {name: "Johnn", age: 30}

As before we create addAge function as decorator, different from before, it return class, because we want to decorate Person class.

After the decorator, we will have age prop on the person class.

[TypeScript] Understanding Decorators

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5573975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!