Error: decorator is not a function

See original GitHub issue

I’m unable to make a custom annotation attribute that takes parameters, the setup is an Angular 2 app written in TypeScript.

TypeScript code:


export function myAttribute(target: any, keyName: string): any {
    if (!target || !keyName) return;

    console.log('inside attribute!');
}

export class Organization {
    public id: string;
    public name: string;
    @myAttribute(null, 'test') public url: string;
}

JavaScript outout:

System.register([], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    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;
    };
    var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };
    var Organization;
    function myAttribute(target, keyName) {
        if (!target || !keyName)
            return;
        console.log('inside attribute!');
    }
    exports_1("myAttribute", myAttribute);
    return {
        setters:[],
        execute: function() {
            Organization = (function () {
                function Organization() {
                }
                __decorate([
                    myAttribute(null, 'test'), 
                    __metadata('design:type', String)
                ], Organization.prototype, "url", void 0);
                return Organization;
            }());
            exports_1("Organization", Organization);
        }
    }
});

//# sourceMappingURL=OrganizationStore.js.map

The library is imported in my boot.ts, like this:

import 'reflect-metadata';

The exception:

startup.js:485 Error: TypeError: decorator is not a function
        at DecoratePropertyWithoutDescriptor (http://localhost:3000/jspm_packages/npm/reflect-metadata@0.1.3/Reflect.js:564:13)
        at Object.decorate (http://localhost:3000/jspm_packages/npm/reflect-metadata@0.1.3/Reflect.js:91:20)
        at __decorate (http://localhost:3000/app/state/OrganizationStore.js:6:96)
        at eval (http://localhost:3000/app/state/OrganizationStore.js:26:17)
        at execute (http://localhost:3000/app/state/OrganizationStore.js:31:14)

As you see I’m on release 0.1.3, using latest TypeScript (1.8.10) and this is my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "preserveConstEnums": true,
    "jsx": "react"
  },
  "exclude": [
    "node_modules",
    "platforms",
    "www"
  ]
}

Any suggestions for what I can try to fix the issue?

Issue Analytics

State:
Created 7 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

5reactions

darekf77commented, Dec 26, 2017

Ok maybe I will help someone with this annoying problem… When I was developing my npm package, I got this error when I created circular dependencies…

// file endpoint-decorator.ts
import { BaseModel } from './base-model';
export function ENDPOINT() { //decorator function
  ...
    controllers.push(BaseModel)
  ..
 }
// file base-model
import { ENDPOINT } from './endpoint-decorator';
@ENDPOINT()
export class BaseModel {  }

2reactions

rbucktoncommented, Jun 1, 2016

This is related to the fact that classes in JavaScript are not hoisted like function declarations. Especially in ES6 where classes have TDZ (it is a static error to reference them before their declaration).

The workaround is to declare autoserializableAs to take a function that returns the class, rather than the class itself:

export class Teacher {
  @autoserializable name: string;
  @autoserializableAs(() => Student) students: Array<Student>
}

export class Student {
  @autoserializable name: string;
  @autoserializableAs(() => Teacher) teacher:Teacher;
}

This creates a closure that defers evaluation until you invoke the closure.