reactjs - 在不分配功能的情况下 react Typescript FunctionalComponent

Question

我遇到了定义 FormWithRedirect 的这部分代码作为 FC(FunctionComponent) :

declare const FormWithRedirect: FC<FormWithRedirectProps>;
export declare type FormWithRedirectProps = FormWithRedirectOwnProps & Omit<FormProps, 'onSubmit' | 'active'>;
export interface FormWithRedirectOwnProps {
  defaultValue?: any;
  record?: Record;
  redirect?: RedirectionSideEffect;
  render: (props: Omit<FormViewProps, 'render' | 'setRedirect'>) => React.ReactElement<any, any>;
  ...
}

以下是它的使用方法:

const SimpleForm: FC<SimpleFormProps> = (props) => (
  <FormWithRedirect {...props} render={(formProps) => <SimpleFormView {...formProps} />} />
);

考虑 FC 的定义如下:

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

我想应该分配给 FormWithRedirect在使用它之前(类似于 FormWithRedirect = (props) => {....} )，但是在上面的代码中没有分配，也没有分配函数。它是如何工作的？

Answer 1

https://stackoverflow.com/a/59552002/2312051
tl;博士

'declare' is used to tell the compiler 'this thing (usually a variable) exists already, and therefore can be referenced by other code, also there is no need to compile this statement into any JavaScript"

引用 SO 时

在 docs:

Declaration.

Use declare var to declare variables. If the variable is read-only, you can use declare const. You can also use declare let if the variable is block-scoped.

/** The number of widgets present */
declare var foo: number;

FormWithRedirect是一个描述如何使用/返回 const 的声明。即它将是具有 FormWithRedirectProps 的功能组件
这是定义特定变量将接受/返回的接口(interface)/类型的简写。
根据我的理解，使用 declare 是编译器的简写 1. 没有为 FormWithRedirect 的实例显式创建定义和 2. 引用 FormWithRedirect稍后进行类型推断(在实现 const 之前)

示例:
而不是将 const 与赋值耦合

const FormWithRedirect: FC<FormWithRedirectProps> = () => {
  ...whatever
}

某个地方，(声明 FormWithRedirect 将并且应该存在于某处)

declare const FormWithRedirect: FC<RedirectWithProps>

期待在其他地方实现

const FormWithRedirect = () => {}