question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Form.create decorator stopped working in TS

See original GitHub issue

Version

2.11.0

Environment

osx, TSC 2.4.0-dev.20170531

Reproduction link

https://codepen.io/anon/pen/OgbWbG

Steps to reproduce

import * as React from "react";
import { Form } from 'antd'
import { FormCreateOption } from "antd/lib/form/Form";

interface Props {
    test: string
}

//// Decorator on class - DOES NOT WORK ANYMORE

@Form.create({}) // ERROR here
export class FormDecorator extends React.Component<Props, {}> {

}

What is expected?

It should be able to use decorator as in the past

What is actually happening?

Only the following is possible:

import * as React from "react";
import { Form } from 'antd'
import { FormCreateOption } from "antd/lib/form/Form";

interface Props {
    test: string
}

/////// Wrapping/decorating after class declaration - WORKS FINE

class FormDecorator2 extends React.Component<Props, {}> {

}

export const WrappedFormDecorator2 = Form.create({})(FormDecorator2)


One way to make it work would be to use the approach that react-i18next translate decorator works. This makes it work for both cases. Please let me know if you would accept PR with such fix

import * as React from "react";

////////////
// Fix that works for both
// (concept of decorator declaration taken from react-i18next `translate` decorator)


declare function fixedCreate (options?: FormCreateOption | undefined) : <C extends Function>(WrappedComponent: C) => C

@fixedCreate({})
export class FormDecorator3 extends React.Component<Props, {}> {

}


class FormDecorator4 extends React.Component<Props, {}> {

}

export const WrappedFormDecorator4 = fixedCreate(FormDecorator4)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:14 (10 by maintainers)

github_iconTop GitHub Comments

9reactions
yesmeckcommented, Mar 30, 2018

Closing since we can do nothing for now.

3reactions
pedroteixeiracommented, Feb 25, 2018

Any workaround for this?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Antd's @Form.create<Props>() decorator results in ambiguous ...
The decorator will not work in TypeScript: see this answer. Using Form.create<IProps>()(Login) at export and removing the decorator from the ...
Read more >
Decorators do not work as you might expect
A: Nothing. The decorator doesn't get called because we are not creating an instance of the class; hence, nothing is logged. B: The...
Read more >
Documentation - Decorators - TypeScript
A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use...
Read more >
Enabling decorators · MobX
Decorating static class members; Combining decorators provided by MobX with other decorators; Hot module reloading (HMR) / React-hot-loader might not work as ...
Read more >
Angular and TS Decorators with Live Examples (Intermediate ...
Also, we will create a live running example of dependency injection with our custom decorators. With these Typescript decorators, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found