zoukankan      html  css  js  c++  java
  • [TypeScript] Reflection and Decorator Metadata

    TypeScript allows you to emit decorator metadata which enables more powerful features through reflection. This lesson show you how decorators and reflection fit together and how to configure your own decorators to use reflection.

    For now, if we look at the compiled file:

    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    function addAge(age) {
        return function (targetClass) {
            return (function () {
                function class_1() {
                    this.age = age;
                    this.name = new targetClass().name;
                }
                return class_1;
            }());
        };
    }
    var Person = (function () {
        function Person() {
            this.name = "Johnn";
        }
        Person = __decorate([
            addAge(30)
        ], Person);
        return Person;
    }());
    var john = new Person();
    console.log(john); // {name: "Johnn", age: 30}

    It decorates addAge to Person class. 

    Now if we enable "emitDecoratorMetadata" in tsconfig.json:

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

    Compile the files again, now we get:

    var Person = (function () {
        function Person() {
            this.name = "Johnn";
        }
        Person = __decorate([
            addAge(30), 
            __metadata('design:paramtypes', [])
        ], Person);
        return Person;
    }());

    It also add metadata.

    Install: 

    npm install reflect-metadata crypto --save

    Index.html:

    <script>
        System.config({
            packages: {
                "dist": {
                    "defaultExtension": "js",
                    "main": "main"
                },
                "rxjs": {
                    "defaultExtension": "js"
                }
            },
            map: {
                "lodash": "https://npmcdn.com/lodash@4.13.1",
                "rxjs": "node_modules/rxjs",
                "reflect-metadata": "node_modules/reflect-metadata/Reflect.js",
                "crypto": "node_modules/crypto/sha1.js",
            }
        });
    
        System.import("dist")
    </script>

    main.ts:

    import 'reflect-metadata';
    function example(){ return function(targetClass){ const types = Reflect.getMetadata('design:paramtypes', targetClass); console.log(types); return targetClass } } @example() class Person{ constructor(name: string, age: number){ } } new Person("John", 10);

    So in the example() fucntion, we console log out types, it will show:

    That means we were able to make it generic, so that any class that comes through into this example decorator, we can look up its types and then use those types to modify or pass into the constructor, and return the class decorated however we want.

  • 相关阅读:
    【题解】 「APIO2019」桥梁 操作分块+带权并查集 LOJ3145
    csp-s模拟测试42「世界线·时间机器·密码」
    csp-s模拟测试41「夜莺与玫瑰·玫瑰花精·影子」
    NOIP模拟测试38「金·斯诺·赤」
    NOIP模拟测试「简单的区间·简单的玄学·简单的填数·简单的序列」
    NOIP模拟测试34「次芝麻·呵呵呵·长寿花」
    理科卷math·english·chinese·biology·chemistry·physics
    NOIP模拟测试28「阴阳·虎·山洞」
    NOIP模拟测试30「return·one·magic」
    NOIP模拟测试29「爬山·学数数·七十和十七」
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5574234.html
Copyright © 2011-2022 走看看