React-Typescript:排除高阶组件中的属性

Question

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

我想写的打字稿类型定义，正确地公开由这个HOC创建的组件的道具类型：基本上复制（推断）包装组件的道具类型，并删除我的HOC提供的属性。有可能吗？

在下面的示例中，我有一个HOCwith Bar，它为任何接受它的包装组件提供了bar： stringprop。因此，Foo=with Bar（FooBar）组件应该有propsfoBarProps，不包括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

我最终找到的最佳解决方案是：

export function withBar<TProps extends {bar: string}>(
    WrappedComponent: React.ComponentType<TProps>
) {
    return class WithBar extends React.PureComponent<
        Pick<TProps, Exclude<keyof TProps, "bar">> // = Omit<TProps, "bar">
    > {
        public render() {
            return <WrappedComponent
                {...this.props as any /* still can't do better than using any here */}
                bar={"BAR"}
            />;
        }
    };
}

其思想是，泛型参数TProps包含我想要从结果组件中排除的属性/ie，并且我在结果组件的类型签名中手动排除它们。

唯一的警告是，TypeScript无法确定传递给包装组件的{...this.props}具有适当的类型，所以我不得不使用any，但幸运的是，它只影响组件的内部所有暴露在外的类型都应该是准确的。

Typescript错误消息在那里也变得非常疯狂，因此我无法调试原因：TS2322:Type'Readonly

Answer 2

Pick和Exclude类型在这里有帮助：

interface Foo{
    woo: string
    doo: number
}
interface Goo{
    doo: number
}


type FooExcludeGoo = Pick<Foo, Exclude<keyof Foo, keyof Goo>> // {woo:string}

Answer 3

像下面这样的东西怎么样，它是有效的，但可能不能完全回答你的问题。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" />;