Coder Social home page Coder Social logo

class-decorators's Introduction



Hi! I'm Joshua. I build things with JavaScript.

I'm passionate about:

🧑‍💻  Developer Experience
💅  Design Language Systems
🌎  Distributed Systems
⚙️  Software Development Processes

Languages & Tools

                    

class-decorators's People

Contributors

darkobits avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

class-decorators's Issues

TypeScript error: Class constructor Person cannot be invoked without 'new'

Trying to use your library from Typescript 2.6.x

Any idea what could be the issue here?

 FAIL  test/_playbox/superpowers.test.ts
  ✕ superpowers (4ms)

  ● superpowers

    TypeError: Class constructor Person cannot be invoked without 'new'
      
      at new Person (node_modules/@darkobits/class-decorator/dist/class-decorator.js:85:22)
      at Object.<anonymous>.test (test/_playbox/superpowers.test.ts:40:17)
import classDecorator from '@darkobits/class-decorator';

function addSuperpowers(...powers) {
  return classDecorator({
    onConstruct() {
      powers.forEach(power => {
        this[power] = true;
      });
    },
    prototype: {
      hasSuperpower(power) {
        return this[power];
      }
    }
  });
}

@addSuperpowers('strength', 'speed', 'flight')
class Person {
  name: string
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

test('superpowers', () => {
  const bob = new Person('Bob');
  expect(bob.strength).toBeTruthy()
})

My tsconfig.json set with target es6.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": [
      "es6",
      "dom"
    ],
    "outDir": "./dist",
    "allowJs": true,
    "types": [
      "node",
      "jest",
      "jest-jquery-matchers"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

And jest.config.json

  "transform": {
    "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
    "^.+\\.(ts|js|jsx|tsx)$": "<rootDir>/preprocessor.js"
  },
  "transformIgnorePatterns": [
    "<rootDir>/node_modules/(?!@tecla5)",
  ],

PS: I had the exact same problem with this example:

function logClass(target: any) {

  // save a reference to the original constructor
  var original = target;

  // a utility function to generate instances of a class
  function construct(constructor, args) {
    var c: any = function () {
      return constructor.apply(this, args);
    }
    c.prototype = constructor.prototype;
    return new c();
  }

  // the new constructor behaviour
  var f: any = function (...args) {
    console.log("New: " + original.name);
    return construct(original, args);
  }

  // copy prototype so intanceof operator still works
  f.prototype = original.prototype;

  // return new constructor (will override original)
  return f;
}

@logClass
class Person {

  public name: string;
  public surname: string;

  constructor(name: string, surname: string) {
    this.name = name;
    this.surname = surname;
  }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.