摘要：原文链接高阶组件在中是组件复用的一个强大工具。在本文中，高阶组件将会被分为两种基本模式，我们将其命名为和用附加的功能来包裹组件。这里我们使用泛型表示传递到的组件的。在这里，我们定义从返回的组件，并指定该组件将包括传入组件的和的。
原文链接：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 ?
然后是加上types
interface WithLoadingProps {
loading: boolean;
}
const withLoading = (Component: React.ComponentType
) =>
class WithLoading extends React.Component
{
render() {
const { loading, ...props } = this.props;
return loading ?
这里发生了一些事情，所以我们将把它分解：
interface WithLoadingProps {
loading: boolean;
}
在这里，声明一个props的interface，将会被添加到被包裹的组件上。
(Component: React.ComponentType
)
这里我们使用泛型：P表示传递到HOC的组件的props。React.ComponentType
是 React.FunctionComponent
| React.ClassComponent
的别名，表示传递到HOC的组件可以是类组件或者是函数组件。
class WithLoading extends React.Component
在这里，我们定义从HOC返回的组件，并指定该组件将包括传入组件的props（P）和HOC的props（WithLoadingProps）。它们通过 & 组合在一起。
const { loading, ...props } = this.props;
最后，我们使用loading props有条件地显示加loading图或传递了自己props的组件：
return loading ?: ;
注意：由于typescript中可能存在的bug，因此从typescript v3.2开始，这里需要类型转换（props as p）。
我们的withloading HOC也可以重写以返回函数组件而不是类：
const withLoading =( Component: React.ComponentType
): React.FC
=> ({ loading, ...props }: WithLoadingProps) => loading ?
: ;
这里，我们对对象rest/spread也有同样的问题，因此通过设置显式的返回类型React.FC
来解决这个问题，但只能在无状态功能组件中使用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 = (
Component: React.ComponentType
) =>
class MakeCounter extends React.Component<
Subtract,
MakeCounterState
> {
state: MakeCounterState = {
value: 0,
};
increment = () => {
this.setState(prevState => ({
value: prevState.value + 1,
}));
};
decrement = () => {
this.setState(prevState => ({
value: prevState.value - 1,
}));
};
render() {
return (
这里有几个关键区别：
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) => (
{props.value}
);
export default makeCounter(Counter);
(Component: React.ComponentType
)
我们再次使用泛型，但是这次，你要确保传入到HOC的组件包含注入到其中的props，否则，你将收到一个编译错误。
