Skip to content

Decorators support inconsistent with Typescript #8864

@PeterKottas

Description

@PeterKottas

Bug Report

I was trying to port build pipeline (webpack) from ts-loader to babel-loader.
I am using decorator (for redux action types) implementation bellow.

Current Behavior
My input code works just fine with typescript. However using babel, prototype in actionClass in my decorator is undefined. I also tried various modifications (omit prototype and set type directly on actionClass) but all failed. I was simply unable to set type on the base class with decorator.

// Babel console.log(actionClass);
Descriptor {kind: "class", elements: Array(0), Symbol(Symbol.toStringTag): "Descriptor"}

Input Code

abstract class Action {
    public type: string;
    constructor() {
        this.type = this.type;
    }
}

export interface ActionClass<T extends Action> {
    prototype: T;
}

export function typeName(name: string): <T extends Action>(actionClass: ActionClass<T>) => void {
    return actionClass => {
        actionClass.prototype.type = name;
    };
}

// Usage :
export interface TestActionPayload {
    sample: string;
}
@typeName('TEST_ACTION')
export class TestAction extends Action {
    constructor(public payload: TestActionPayload) {
        super(payload);
    }
}

Expected behavior/code
It is partly unclear to me if this is a bug, or problem on my end. However, one way or another, I am expecting to be able to set properties on base class with decorators. Currently I can't.

// Typescript console.log(actionClass);
ƒ TestAction(payload) {
    var _this = _super.call(this, payload) || this;
    _this.payload = payload;
    return _this;
}

Babel Configuration (.babelrc, package.json, cli command)

options: {
    cacheDirectory: true,
    babelrc: false,
    presets: [
        [
            "@babel/preset-env",
            { targets: { browsers: "last 2 versions" } } // or whatever your project requires
        ],
        "@babel/preset-typescript",
        "@babel/preset-react"
    ],
    plugins: [
        ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        "@babel/plugin-syntax-dynamic-import",
        "react-hot-loader/babel"
    ]
}

Environment

  • Babel version(s): [7.1.2]
  • Node/npm version: [Node 9.5.0/npm 6.4.1]
  • OS: [Windows 10]
  • Monorepo [no]
  • How you are using Babel: [loader]

Possible Solution

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

Metadata

Metadata

Assignees

No one assigned

    Labels

    outdatedA closed issue/PR that is archived due to age. Recommended to make a new issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions