为道具定义mobx-react-lite观察者泛型

时间:2019-04-12 14:50:35

标签: typescript mobx mobx-react

无法使用mobx-react-lite定义观察者原型。

我尝试将泛型用于观察者函数,但它提供了一个错误。

做这样的事情很好:

List<Integer> go(int[][] mat) 
{
    int capacity = mat.length * mat[0].length; // Not needed.
    List<Integer> list = new ArrayList<>(capacity);
    for (int i = 0; i < mat.length; i++) 
    {
        for (int j = 0; j < mat[i].length; j++) 
        {
            list.add(mat[i][j]);
        }
    }
    return list;
}

但在更复杂的示例中:

import { observer } from 'mobx-react-lite';

type PassedProps = {
  foo: string,
  num: number
}
const Element = (props: PassedProps) => null;
observer<PassedProps>(Element)

错误:

import { observer } from 'mobx-react-lite';

import { StoreContext } from 'index';

export function connect<MappedProps, PassedProps> (
  mapStoreToProps: (store: any, ownProps:PassedProps) => MappedProps,
  UIComponent: React.FunctionComponent<MappedProps & PassedProps>
) {
  const WrappedComponent = (props: PassedProps) => {
    const store = React.useContext(StoreContext);
    const mapped = mapStoreToProps(store, props);
    return UIComponent({...mapped, ...props});
  }
  return observer<PassedProps>(WrappedComponent);
}

1 个答案:

答案 0 :(得分:0)

我当然知道了。我必须定义通用类型约束:

export function connect<MappedProps extends object, PassedProps extends object> (
  mapStoreToProps: (store: any, ownProps:PassedProps) => MappedProps,
  UIComponent: React.FunctionComponent<MappedProps & PassedProps>
) {
  const WrappedComponent = (props: PassedProps) => {
    const store = React.useContext(StoreContext);
    const mapped = mapStoreToProps(store, props);
    return UIComponent({...mapped, ...props});
  }
  return observer<PassedProps>(WrappedComponent);
}