TypeScript React HOC тип возвращаемого значения, совместимый с декоратором - PullRequest
Новая
       65

TypeScript React HOC тип возвращаемого значения, совместимый с декоратором

0 голосов
/ 28 ноября 2018

Я использую React Native с TypeScript.Я написал HOC, который мне нравится использовать в качестве декоратора для обозначения компонентов: 

import React, { Component, ComponentClass, ReactNode } from "react";
import { Badge, BadgeProps } from "../Badge";

function withBadge<P>(
  value: number,
  hidden: boolean = value === 0
): (WrappedComponent: ComponentClass<P>) => ReactNode {
  return (WrappedComponent: ComponentClass<P>) =>
    class BadgedComponent extends Component<P> {
      render() {
        return (
          <React.Fragment>
            <WrappedComponent {...this.props} />
            {!hidden && <Badge value={value} />}
          </React.Fragment>
        );
      }
    };
}

export default withBadge;

Проблема в том, что теперь, когда я пытаюсь использовать этот компонент в качестве декоратора, вот так: 

import React, { PureComponent } from "react";
import { Icon } from "react-native-elements";
import { getIconName } from "../../services/core";
import withBadge from "../WithBadge/withBadge";
import styles from "./styles";

@withBadge(1)
export default class BadgedCart extends PureComponent {
  render() {
    return (
      <Icon
        type="ionicon"
        name={getIconName("cart")}
        containerStyle={styles.iconRight}
        onPress={() => {
          // Nothing.
        }}
      />
    );
  }
}

Я получаю ошибку: 

[ts]
Unable to resolve signature of class decorator when called as an expression.
  Type 'null' is not assignable to type 'void | typeof BadgedCart'. [1238]

Я пробовал другие типы возврата, такие как JSX.Element или ReactElement<any>, но работает только один any, который побеждаетцель TypeScript.Какой тип возвращаемого значения должны иметь компоненты высшего порядка?

Редактировать: Когда я изменяю тип возвращаемого значения (например, Праве предлагается) на typeof PureComponent ошибка для @withBadge(1) изменяется на: 

[ts]
Unable to resolve signature of class decorator when called as an expression.
  Type 'typeof PureComponent' is not assignable to type 'typeof BadgedOrders'.
    Type 'PureComponent<any, any, any>' is not assignable to type 'BadgedOrders'.
      Types of property 'render' are incompatible.
        Type '() => ReactNode' is not assignable to type '() => Element'.
          Type 'ReactNode' is not assignable to type 'Element'.
            Type 'undefined' is not assignable to type 'Element'. [1238]

Если я пытаюсь изменить его просто на PureComponent

    class BadgedComponent extends Component<P> {
      render() {
        return (
          <React.Fragment>
            <WrappedComponent {...this.props} />
            {!hidden && <Badge value={value} />}
          </React.Fragment>
        );
      }
    };

Выдает ошибку: 

[ts]
Type '(WrappedComponent: ComponentClass<P, any>) => typeof BadgedComponent' is not assignable to type '(WrappedComponent: ComponentClass<P, any>) => PureComponent<{}, {}, any>'.
  Type 'typeof BadgedComponent' is not assignable to type 'PureComponent<{}, {}, any>'.
    Property 'context' is missing in type 'typeof BadgedComponent'. [2322]

1 Ответ

0 голосов
/ 28 ноября 2018

Первая проблема заключается в том, что P находится не в том положении, в котором его можно вывести.Поскольку он включен withBadge и этот вызов не будет его содержать.

Вторая проблема заключается в том, что декоратор класса должен возвращать void или тот же тип, что и входной класс: 

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

Это означает, что подпись декоратора не может быть (WrappedComponent: ComponentClass<P>) => ReactNode, поскольку она возвращает ReactNode.Это даже не может быть (WrappedComponent: ComponentClass<P>) => ComponentClass<P>, поскольку это не возвращает то же самое, что передано. Решение состоит в том, чтобы немного соврать компилятору и объявить, что мы возвращаем void, когда мы фактически возвращаем новый класс.Это не будет иметь большого значения во время выполнения: 

class Badge extends React.Component<{ value: number }> { 

}

function withBadge(
value: number,
hidden: boolean = value === 0
): <P extends object>(WrappedComponent: ComponentClass<P>) => void {
return <P extends object>(WrappedComponent: ComponentClass<P>) =>
    class BadgedComponent extends Component<P> {
    render() {
        return (
        <React.Fragment>
            <WrappedComponent {...this.props} />
            {!hidden && <Badge value={value} />}
        </React.Fragment>
        );
    }
    };
}

@withBadge(1)
export default class BadgedCart extends PureComponent {
    render() {
        return (
        <div />
        );
    }
}

Вы можете отказаться от подхода декоратора в пользу простого вызова функции: 

class Badge extends React.Component<{ value: number }> { 

}

function withBadge(
    value: number,
    hidden: boolean = value === 0
): <P extends object>(WrappedComponent: ComponentClass<P>) => ComponentClass<P> {
return <P extends object>(WrappedComponent: ComponentClass<P>) =>
    class BadgedComponent extends Component<P> {
        render() {
            return (
            <React.Fragment>
                <WrappedComponent {...this.props} />
                {!hidden && <Badge value={value} />}
            </React.Fragment>
            );
        }
    };
}

const  BadgedCart = withBadge(1)(class extends PureComponent {
    render() {
        return (
        <div />
        );
    }
});
export default BadgedCart;
...