React Typescript FunctionalComponent without assigning function

Question

I came across this part of code for defining FormWithRedirect as a 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>;
  ...
}

And here is how it is used:

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

considering the definition of FC as below:

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;
}

I suppose there should be assignment to FormWithRedirect before using it (something like FormWithRedirect = (props) => {....}), however in the code above there is no assignment and no function is assigned to it. How does it work?

tried to explain below:

Denis Tsoi
– Denis Tsoi

2020-11-03 15:56:56 +00:00
Commented Nov 3, 2020 at 15:56 — Denis Tsoi
– Denis Tsoi, Commented Nov 3, 2020 at 15:56

Denis Tsoi · Accepted Answer · 2020-11-03 15:56:44Z

https://stackoverflow.com/a/59552002/2312051

tl;dr

'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"

When referencing SO

in 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 is a declaration which describes how const will be used/returned. i.e. it will be a Functional Component with FormWithRedirectProps

It's a short hand for defining the interface/types that a particular variable will accept/return.

From my understanding, using declare is a shorthand for the compiler to 1. not explicitly create a definition for the instance of FormWithRedirect and 2. reference FormWithRedirect type inference at a later time (before you implement the const)

Example:

instead of coupling const with the assignment

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

some place, (declare that FormWithRedirect will and should exist somewhere)

declare const FormWithRedirect: FC<RedirectWithProps>

Expect implementation elsewhere

const FormWithRedirect = () => {}

Collectives™ on Stack Overflow

React Typescript FunctionalComponent without assigning function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related