共计 5094 个字符，预计需要花费 13 分钟才能阅读完成。
原文链接：https://medium.com/@jrwebdev/…
高阶组件（HOCs）在 React 中是组件复用的一个强大工具。但是，经常有开发者在结合 TypeScript 使用中抱怨道很难去为其设置 types。
这边文章将会假设你已经具备了 HOCs 的基本知识，并会根据由浅入深的例子来向你展示如何去为其设置 types。在本文中，高阶组件将会被分为两种基本模式，我们将其命名为 enhancers 和 injectors：
enhancers：用附加的功能 /props 来包裹组件。
injectors：向组件注入 props。
请注意，本文中的示例并不是最佳实践，本文主要只是展示如何在 HOCs 中设置 types。
Enhancers
我们将从 enhancers 开始，因为它更容易去设置 types。此模式的一个基本示例是一个向组件添加 loading props 的 HOC，并且将其设置为 true 的时候展示 loading 图。下面是一个没有 types 的示例：
const withLoading = Component =>
class WithLoading extends React.Component {
render() {
const {loading, …props} = this.props;
return loading ? <LoadingSpinner /> : <Component {…props} />;
}
};
然后是加上 types
interface WithLoadingProps {
loading: boolean;
}
const withLoading = <P extends object>(Component: React.ComponentType<P>) =>
class WithLoading extends React.Component<P & WithLoadingProps> {
render() {
const {loading, …props} = this.props;
return loading ? <LoadingSpinner /> : <Component {…props as P} />;
}
};
这里发生了一些事情，所以我们将把它分解：
interface WithLoadingProps {
loading: boolean;
}
在这里，声明一个 props 的 interface，将会被添加到被包裹的组件上。
<P extends object>(Component: React.ComponentType<P>)
这里我们使用泛型：P 表示传递到 HOC 的组件的 props。React.ComponentType<P> 是 React.FunctionComponent<P> | React.ClassComponent<P> 的别名，表示传递到 HOC 的组件可以是类组件或者是函数组件。
class WithLoading extends React.Component<P & WithLoadingProps>
在这里，我们定义从 HOC 返回的组件，并指定该组件将包括传入组件的 props（P）和 HOC 的 props（WithLoadingProps）。它们通过 & 组合在一起。
const {loading, …props} = this.props;
最后，我们使用 loading props 有条件地显示加 loading 图或传递了自己 props 的组件：
return loading ? <LoadingSpinner /> : <Component {…props as P} />;
注意：由于 typescript 中可能存在的 bug，因此从 typescript v3.2 开始，这里需要类型转换（props as p）。
我们的 withloading HOC 也可以重写以返回函数组件而不是类：
const withLoading = <P extends object>(
Component: React.ComponentType<P>
): React.FC<P & WithLoadingProps> => ({
loading,
…props
}: WithLoadingProps) =>
loading ? <LoadingSpinner /> : <Component {…props as P} />;
这里，我们对对象 rest/spread 也有同样的问题，因此通过设置显式的返回类型 React.FC<P & WithLoadingProps> 来解决这个问题，但只能在无状态功能组件中使用 WithLoadingProps。
注意：React.FC 是 React.FunctionComponent 的缩写。在早期版本的 @types/react 中，是 React.SFC 或 React.StatelessFunctionalComponent。
Injectors
injectors 是更常见的 HOC 形式，但更难为其设置类型。除了向组件中注入 props 外，在大多数情况下，当包裹好后，它们也会移除注入的 props，这样它们就不能再从外部设置了。react redux 的 connect 就是是 injector HOC 的一个例子，但是在本文中，我们将使用一个更简单的例子，它注入一个计数器值并回调以增加和减少该值：
import {Subtract} from ‘utility-types’;
export interface InjectedCounterProps {
value: number;
onIncrement(): void;
onDecrement(): void;
}
interface MakeCounterState {
value: number;
}
const makeCounter = <P extends InjectedCounterProps>(
Component: React.ComponentType<P>
) =>
class MakeCounter extends React.Component<
Subtract<P, InjectedCounterProps>,
MakeCounterState
> {
state: MakeCounterState = {
value: 0,
};
increment = () => {
this.setState(prevState => ({
value: prevState.value + 1,
}));
};
decrement = () => {
this.setState(prevState => ({
value: prevState.value – 1,
}));
};
render() {
return (
<Component
{…this.props as P}
value={this.state.value}
onIncrement={this.increment}
onDecrement={this.decrement}
/>
);
}
};
这里有几个关键区别：
export interface InjectedCounterProps {
value: number;
onIncrement(): void;
onDecrement(): void;
}
我们给将要注入到组件的 props 声明一个 interface，该接口将被导出，以便这些 props 可由被 HOC 包裹的组件使用：
import makeCounter, {InjectedCounterProps} from ‘./makeCounter’;
interface CounterProps extends InjectedCounterProps {
style?: React.CSSProperties;
}
const Counter = (props: CounterProps) => (
<div style={props.style}>
<button onClick={props.onDecrement}> – </button>
{props.value}
<button onClick={props.onIncrement}> + </button>
</div>
);
export default makeCounter(Counter);
<P extends InjectedCounterProps>(Component: React.ComponentType<P>)
我们再次使用泛型，但是这次，你要确保传入到 HOC 的组件包含注入到其中的 props，否则，你将收到一个编译错误。
class MakeCounter extends React.Component<
Subtract<P, InjectedCounterProps>,
MakeCounterState
>
HOC 返回的组件使用 Piotrek Witek’s 的 utility-types 包中的 subtract，它将从传入组件的 props 中减去注入的 props，这意味着如果它们设置在生成的包裹组件上，则会收到编译错误：
Enhance + Inject
结合这两种模式，我们将在计数器示例的基础上，允许将最小和最大计数器值传递给 HOC，而 HOC 又被它截取并使用，而不将它们传递给组件：
export interface InjectedCounterProps {
value: number;
onIncrement(): void;
onDecrement(): void;
}
interface MakeCounterProps {
minValue?: number;
maxValue?: number;
}
interface MakeCounterState {
value: number;
}
const makeCounter = <P extends InjectedCounterProps>(
Component: React.ComponentType<P>
) =>
class MakeCounter extends React.Component<
Subtract<P, InjectedCounterProps> & MakeCounterProps,
MakeCounterState
> {
state: MakeCounterState = {
value: 0,
};
increment = () => {
this.setState(prevState => ({
value:
prevState.value === this.props.maxValue
? prevState.value
: prevState.value + 1,
}));
};
decrement = () => {
this.setState(prevState => ({
value:
prevState.value === this.props.minValue
? prevState.value
: prevState.value – 1,
}));
};
render() {
const {minValue, maxValue, …props} = this.props;
return (
<Component
{…props as P}
value={this.state.value}
onIncrement={this.increment}
onDecrement={this.decrement}
/>
);
}
};
这里，Subtract 与 types 交集相结合，将组件自身的 props 与 HOCs 自身的 props 相结合，减去注入组件的 props：
Subtract<P, InjectedCounterProps> & MakeCounterProps
除此之外，与其他两种模式相比，没有真正的差异需要强调，但是这个示例确实带来了一些高阶组件的问题。这些并不是真正特定于 typescript 的，但值得详细说明，以便我们可以讨论如何使用 typescript 来解决这些问题。
首先，MinValue 和 MaxValue 被 HOC 拦截，而不是传递给组件。但是，你也许希望它们是这样的，这样你就可以基于这些值禁用递增 / 递减按钮，或者向用户显示一条消息。如果用 HOC，你也可以简单地修改它来注入这些值，但是如果你没有（例如，它来自一个 NPM 包），这就将会是一个问题。
其次，由 HOC 注入的 prop 有一个非常通用的名称；如果要将其用于其他目的，或者如果要从多个 HOC 注入 prop，则此名称可能与其他注入的 prop 冲突。您可以将名称更改为不太通用的解决方案，但就解决方案而言，这不是一个很好的解决方案！
