使用Typescript输入的Mobx通用观察者

编程问答 2022-08-12

问题描述

我想将以下函数包装在mobx的observer()中，但似乎无法弄清楚如何做到这一点（或者如果可能的话），同时又保持了通用类型：

interface GenericProps<T> {
  arg: T;
}
const foo: <T>(props: GenericProps<T>) => T = (props) => props.arg;

这是全局导出的函数，因此（我认为）不能使用@observer装饰器，我需要使用mobx-lite-react的observer()函数。

我想要的是类似的东西

interface GenericProps<T> {
  arg: T;
}
const foo = observer<T>((props: GenericProps<T>) => props.arg);

可能与https://github.com/mobxjs/mobx-react-lite/issues/243有关，但是从对话中我不清楚我将如何实现我的情况下的通用观察器。

解决方法

  1. 您的样品不是反应组分，您需要匹配React.FunctionComponent界面
const foo_1: <T>(props: GenericProps<T>) => React.ReactElement | null = (props) => <>{JSON.stringify(props.arg)}</>;
  1. 添加观察者（由于TS 3.4或3.5的改进，它应该已经可以工作了）
const foo_2: <T>(props: GenericProps<T>) => React.ReactElement | null = observer((props) => <>{JSON.stringify(props.arg)}</>);
  1. 如果在较旧的TS上，您需要将类型声明移到函数本身（请注意extends unknown，它告诉编译器这是通用定义而不是JSX标记，因此不需要指定返回类型，因为推断）
const foo_3 = observer(<T extends unknown>(props: GenericProps<T>) => <>{JSON.stringify(props.arg)}</>);
,

这就是你想要的吗？

interface GenericProps<T> {
  arg: T
}

const foo = <T extends IReactComponent>(props: GenericProps<T>) => observer(props.arg)

我不太了解，因为在第一个示例中您具有返回另一个函数的函数，但是在第二个示例中，您只是将函数传递给observer，但由于观察者仅接受扩展{{ 1}}

mobxmobxmobxmobxmobx-react-litereactjsreactjsreactjsreactjstypescripttypescripttypescripttypescript-typings