reactjs - 如何使用 Typescript 在 React 中处理 HOC 注入(inject)的 Prop ？

Question

我创建了一个注入(inject)方法的简单 HOC translate在一个组件中。

export interface IMessageProps {
  translate: (key: string) => string;
}

export const message = <P extends object>(
  Component: React.ComponentType<P & IMessageProps>
): React.SFC<P & IMessageProps> => (props: P) => {

  const translate = (key: string): string => messages[key];

  return <Component {...props} translate={translate}/>;
};

用法:

class MyComponent extends React.Component<IMessageProps, {}> {
  render() {
    return (
      <>{this.props.translate('hello.world')}</>
    );
  }
}

export default message(MyComponent);

当我想调用我的组件时，问题就来了 <MyComponent/>因为 tsc 提示属性 translate未传递给 MyComponent并期待类似 <MyComponent translate={...}/> 的东西.

Type '{}' is not assignable to type 'IntrinsicAttributes & IMessageProps & { children?: ReactNode; }'.
  Type '{}' is not assignable to type 'IMessageProps'.
    Property 'translate' is missing in type '{}'.

所以我的问题是:如何绕过这个假错误？我不想做 translate在 IMessageProps 中可选因为 tslint 会提示 Cannot invoke an object which is possibly 'undefined' .

Answer 1

编辑

Typescript 3.2 破坏了下面的代码。在 3.2 之前，除了 jsx 标签之外，不允许使用泛型类型参数的传播操作，并且在那里没有得到非常严格的检查。这issue改变这个。传播操作没有得到更严格的检查，这会中断代码。我们可以做的最简单的调整是在 props 上使用类型断言。 :

export const message = <P extends IMessageProps>(
    Component: React.ComponentType<P>
): React.SFC<Pick<P, Exclude<keyof P, keyof IMessageProps>>> => (props: Pick<P, Exclude<keyof P, keyof IMessageProps>>) => {

    const translate = (key: string): string => messages[key];

    return <Component {...props as P} translate={translate} />;
};

3.2 之前

您可以只排除 IMessageProps 的属性来自返回的 SCF使用 Pick从 P 中选择属性和 Exclude排除 IMessageProps 的键

export interface IMessageProps {
    translate: (key: string) => string;
}

export const message = <P extends IMessageProps>(
    Component: React.ComponentType<P>
): React.SFC<Pick<P, Exclude<keyof P, keyof IMessageProps>>> => (props: Pick<P, Exclude<keyof P, keyof IMessageProps>>) => {

    const translate = (key: string): string => messages[key];

    return <Component {...props} translate={translate} />;
};


class MyComponent extends React.Component<IMessageProps, {}> {
    render() {
        return (
            <>{this.props.translate('hello.world')}</>
        );
    }
}

const MyComponentWrapped = message(MyComponent);

let d = <MyComponentWrapped /> // works

3.5 及以上

您可以使用 Omit<P, keyof IMessageProps>而不是 Pick<P, Exclude<keyof P, keyof IMessageProps>>