Можно ли реализовать кастомный typescript-декоратор для типизации пропсов по аналогии с @Input в Angular?

Question

[Nikitakun1]

Подскажите, возможно ли написать кастомный ts-трансформер, чтобы IDE (Webstorm) по декоратору свойства класса смогла предлагать пропсы при написании JSX-элементов (и чтобы при компиляции происходил тайпчекинг)? Хотелось бы, чтоб это выглядело примерно вот так:

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

 }

Мотивировано тем, что прокидывать интерфейсы пропсов в виде дженериков и постоянно вычленять пропсы из this.props неудобно, это все можно было бы реализовать при помощи декоратора, но я не понимаю, каким образом заставить ts-компилятор и IDE воспринимать подобный декоратор должным образом

Comments

[Demian Smith]

А можете немного описать что в таком подходе неудобно?

import React, { Component } from 'react';

type NoticeProps = {
  msg: string
}

export class Notice extends Component<NoticeProps> {
  render() {
    return <p>{ this.props.msg }</p>
  }
}

Ато не совсем понятно как вам помочь.

[Антон Швец]

декораторы не меняют сигнатуры класса.

Answer 1

[Aetae]

Я, увы, не до конца понял, что именно вам нужно, но одно могу сказать: IDE умеет работать напрямую только с самим typescript, т.е. если исходя из логики typescript там должен быть тайпчек или там может быть ограниченный набор для подстановки - это будет работать. Если нет - нет. Кастомные трансформы не учитываются.
Также IDE может расширенно поддерживать популярные расширения и трансформы с помощью (встроенных) плагинов, но для своего уникального кейса, выходящего за стандартные рамки, вам придётся пилить свой плагин.
Декораторы же - это не магия, это обычные функции + сахарный синтаксис.