reactjs - react typescript : exclude property in higher order component

Question

我有一个 HOC，它为包装的组件提供一个属性。

我想编写正确公开此 HOC 创建的组件的 Props 类型的 Typescript 类型定义:基本上复制(推断)包装组件的 props 类型并删除我的 HOC 提供的属性。可能吗？

在下面的示例中，我有一个 HOC withBar，它向任何接受它的包装组件提供 bar:string 属性。因此 Foo = withBar(FooBar) 组件应该有 Prop FooBarProps 排除 bar，这意味着只有 {foo: string}/。然而，Typescript 显然仍然认为 Foo 组件也应该获得 foo 属性。

我使用 Typescript 3.3.1。

import * as React from "react";

interface FooBarProps {
	foo: string;
	bar: string;
}

class FooBar extends React.PureComponent<FooBarProps> {
	public render() {
		return <>{this.props.foo} {this.props.bar}</>;
	}
}

export function withBar<TProps>(
    WrappedComponent: React.ComponentType<TProps & {bar: string}>
) {
	return class WithBar extends React.PureComponent<TProps> {

		public render() {
			return <WrappedComponent
				{...this.props}
				bar={"BAR"}
			/>;
		}
	};
}

const Foo = withBar(FooBar);

// Typescript complains here:
// Error:(29, 14) TS2741: Property 'bar' is missing in type
// '{ foo: string; }' but required in type 'Readonly<FooBarProps>'.
const foo = <Foo foo="FOO" />;

Answer 1

像下面这样的东西怎么样，它有效，但可能不能完全回答你的问题。 https://codesandbox.io/embed/peaceful-star-194g5?fontsize=14

它的要点是将 Foo 和 Bar 拆分为不同的类型，然后将它们连接在一起作为包装组件。如果您不想访问沙箱，请使用以下代码:

import * as React from "react";

interface BarProps {
  bar: string;
}

interface FooProps {
  foo: string;
}

type FooBarProps = FooProps & BarProps;

class FooBar extends React.PureComponent<FooBarProps> {
  public render() {
    return (
      <>
        {this.props.foo} {this.props.bar}
      </>
    );
  }
}

export function withBar<TProps>(
  WrappedComponent: React.ComponentType<TProps & BarProps>
) {
  return class WithBar extends React.PureComponent<TProps> {
    public render() {
      return <WrappedComponent {...this.props} bar={"BAR"} />;
    }
  };
}

const Foo = withBar(FooBar);

// Typescript complains here:
// Error:(29, 14) TS2741: Property 'bar' is missing in type
// '{ foo: string; }' but required in type 'Readonly<FooBarProps>'.
export const Foof = () => <Foo foo="FOO" />;