Машинопись расширяет React.Component

Question

@ Т.Л., др
Я хочу расширить компонент React без использования HOC / провайдеров в Typescript

---

Хорошо, вот сделка ...
На моем рабочем месте мы раньше работали с Vue и обычным JS ... затем мы решили перейти на React с Typescript ...

Технологии, которые мы используем : - Реагировать - машинопись - Redux - Redux-Saga

Дело в том, что в Vue мы можем объявить что-то вроде:

Vue.use(Auth)

и в каждом файле .vue внутри тега script мы можем вызвать что-то вроде:

this.$auth

и иметь доступ к методам авторизации.

Что я хочу сделать, это ... создать расширение ReactComponent, где я уже создал несколько методов, которые будет использовать большинство моего компонента ... что-то вроде:

• auth // Проверка подлинности пользователя и, если да, получение информации о пользователе
• route // Дайте мне текущий маршрут с параметрами запроса, перенаправлениями и т. Д. Это были единственные, кого я мог придумать сейчас.

Я хочу, чтобы в моем файле .ts было что-то вроде этого:

interface MyProps {
    route: any // don't remember the correct Type
}

class MyComponent<T,S = {},SS = {}> extends React.Component<T,S,SS> {
    $route = () => {
        this.props.route
    }
}

export default withRouter(MyComponent)

и вызвать его в моем приложении следующим образом:

inteface AnotherProps {

}

class AnotherComponent extends MyComponent<AnotherProps> {
    render() {
        if(this.$route().location.pathname == "/") {
            return <div>Root</div>
        } else {
            return <div>Not Root</div>
        }
    }
}

Что я пробовал до сих пор

HOC (Компоненты высокого порядка)

Я мог бы достичь того, что хочу, используя HOC, но дело в том ... если возможно, я бы хотел 2 вещи.

• Чтобы эти новые свойства были сохранены в this , а не this.props , и если это возможно при использовании HOC, я не знаю, как
• С HOC мне также нужно импортировать базовые реквизиты, что-то вроде этого:

import BaseProps from Outterspace;

inteface AnotherProps extends BaseProps{

}

и я хочу, чтобы логика внутри MyComponent и AnotherComponent была максимально независимой друг от друга ...

Поставщики

Так же, как HOC, мне нужно передать свойства, которые я хочу, в качестве реквизита, и мне нужно будет расширить интерфейс моего реквизита.

[EDIT]

Декораторы

Кто-то сказал в комментариях, что я могу попытаться использовать Decoratos, и хотя я действительно читал документы, и это звучало многообещающе ... последняя строка Документов как-то меня беспокоит ..

ПРИМЕЧАНИЕ Метаданные Decorator - это экспериментальная функция, которая может привести к серьезным изменениям в будущих выпусках.

Большое спасибо за то, что прочитали это далеко ^^

Answer 1

Если вы используете машинопись, вы можете создавать декораторы.

Вы можете вызвать декоратор поверх вашего класса и добавить свойство.

@YourAuthDecorator({
  'propertiesForconfiguration': 'value'
})
export class ReactClass extends ReactComponent {}

Пример:

function abc() {
  return {};
}

export function Auth() {
  console.log("-- decorator function invoked --");
  return function (constructor: Function){
    console.log(constructor, 'called');
    constructor.prototype.$auth = abc();
  }
}

class Sample {
  public prop = 'sample'
}

@Auth()
export class Content extends Sample {

}

export const a = new Content();

Функцией декоратора будет добавление различных свойств к этому экземпляру, обеспечивающему вам доступ к различным функциям / свойствам, таким как auth

Вы можете прочитатьбольше о декораторах здесь.https://www.typescriptlang.org/docs/handbook/decorators.html