Is it possible to implement a custom typescript decorator to type props like @Input in Angular?

Question

Angular

Tell me, is it possible to write a custom ts-transformer so that the IDE (Webstorm) can offer props when writing JSX elements by the class property decorator (and so that typechecking occurs during compilation)? I would like it to look something like this:

class App extends React.Component {
 
    @Prop public color: string;

 }

Motivated by the fact that passing props interfaces as generics and constantly isolating props from this.props is inconvenient, all this could be implemented using a decorator, but I don’t understand how to make the ts compiler and IDE perceive such a decorator properly

Answer 1

Unfortunately, I did not fully understand what exactly you need, but I can say one thing: the IDE can only work directly with typescript itself, i.e. if based on the logic of typescript there should be a typecheck or there may be a limited set for substitution - this will work. If not, no. Custom transforms are not taken into account.
Also, the IDE can extensively support popular extensions and transforms using (built-in) plugins, but for your unique case that goes beyond the standard framework, you will have to cut your own plugin.
Decorators are not magic, they are just functions + sugary syntax.