如何让 TypeScript 通过 Typescript 中的多个高阶组件来推断类型？

Question

我正在将一个 React 应用程序转换为使用大量函数式编程模式的 Typescript。这些模式中最重要的是将多个高阶组件组合在一起以返回增强组件的能力。我想要发生的事情是让 Typescript 在每个级别推断组件的类型，并以我传递的组件完成，以拥有其上方的所有 HOC 类型。

我已在 3.5.0 和最新版本的 Typescript 上尝试过此代码。代码方面，我尝试让泛型扩展我想要的类型 <T extends FooProps>，将 FC<T & BarProps> 传递给返回功能组件，并反转 HOC 的调用。

export const withFoo = <T>(Component: FC<T & FooProps>): FC<Omit<T, 'foo'>> => props => (
  <Component {...props as T} foo="foo" />
)

export const withBar = <T>(Component: FC<T & BarProps>): FC<Omit<T, 'bar'>> => props => (
  <Component {...props as T} bar="bar" />
)

export const EnhancedComponent = withFoo(
  withBar(({ bar, foo }) => { // bar exists and foo does not exist on type 'PropsWithChildren<BarProps>'
    console.log(bar) // types come through (bar: string)
    console.log(foo) // types don't come through (foo: any) :(
    return <div>woohoo</div> 
  }),
)

我希望这些类型在 HOC 的每个级别都通过。在上面的示例中，我想在我传递的功能组件中看到这一点：

export const EnhancedComponent = withFoo(
  withBar(({ bar, foo }) => { // both exist on the component
    console.log(bar) // bar: string
    console.log(foo) // foo: string
    return <div>woohoo</div>
  }),
)

Answer 1

寻找高阶组件类型的一个好起点是其他包或@types 包。

• react-i18next
• react-redux （这些很复杂）
• react-router-dom

但是，您的用例有点有趣，因为您希望被包装的组件接收更多的道具，并且每个包装的高阶组件都提供这些值之一。

鉴于此，这是一种潜在的解决方案。需要指出的几点：

• 假设您想要允许任何组件类型（类或函数），那么您可能想要找到React.ComponentType。
• 我尽量避免强制转换，但看起来这仍然是 TypeScript 的一个缺点（问题）。这两个问题看起来很相关：#28884 & #28748
• 添加Omit 以供参考，因为在3.5 之前它不存在（我在Codesandbox 中进行测试，此时仍在3.3）

import * as React from "react";
import { render } from "react-dom";

// This exists in TypeScript 3.5+
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

interface FooProps {
  foo: string;
}

interface BarProps {
  bar: string;
}

export const withFoo = <Props extends FooProps>(
  Component: React.ComponentType<Props>
): React.ComponentType<Omit<Props, keyof FooProps>> => props => (
  <Component {...props as Props} foo="foo" />
);

export const withBar = <Props extends BarProps>(
  Component: React.ComponentType<Props>
): React.ComponentType<Omit<Props, keyof BarProps>> => props => (
  <Component {...props as Props} bar="bar" />
);

const WrappedComponent = ({ bar, foo, more }) => {
  console.log(more);
  console.log(bar);
  console.log(foo);
  return <div>woohoo</div>;
};

const EnhancedComponent = withFoo(withBar(WrappedComponent));

const App = () => <EnhancedComponent more="more" />;

const rootElement = document.getElementById("root");
render(<App />, rootElement);