Two function types are defined as follows:
wrapPageElement?(
args: WrapPageElementBrowserArgs<DataType, PageContext, LocationState>,
options: PluginOptions
): React.ReactElement
.. and ..
wrapPageElement?(
args: WrapPageElementNodeArgs<DataSet, PageContext>,
options: PluginOptions
): React.ReactElement
Although the functions are almost identical, the only difference lies in the type of args. This variance is inconsequential for my particular use case. I can rely entirely on the intersecting type between these two functions. To address this, I have formulated the following type:
type Params1 = Parameters<GatsbyBrowser['wrapPageElement']>
type Params2 = Parameters<GatsbySSR['wrapPageElement']>
type Return1 = ReturnType<GatsbyBrowser['wrapPageElement']>
type Return2 = ReturnType<GatsbySSR['wrapPageElement']>
type WrapPageElement = (args: Params1[0] | Params2[0], options: Params1[1] | Params2[1]) => Return1 | Return2;
Here is a minimal reproduction. Although functional, I am contemplating if there exists a more elegant way to define the type WrapPageElement, or if the current approach is optimal.
Tl;dr
type PluginOptions = object;
type ReactElement = object;
type WrapPageElementBrowserArgs = {element: object, browserArgs: object};
type WrapPageElementNodeArgs = {element: object, nodeArgs: object};
type GatsbyBrowser = {
wrapPageElement: (
args: WrapPageElementBrowserArgs,
options: PluginOptions
) => ReactElement
}
type GatsbySSR = {
wrapPageElement: (
args: WrapPageElementNodeArgs,
options: PluginOptions
) => ReactElement
}
type Params1 = Parameters<GatsbyBrowser['wrapPageElement']>
type Params2 = Parameters<GatsbySSR['wrapPageElement']>
type Return1 = ReturnType<GatsbyBrowser['wrapPageElement']>
type Return2 = ReturnType<GatsbySSR['wrapPageElement']>
type WrapPageElement = (args: Params1[0] | Params2[0], options: Params1[1] | Params2[1]) => Return1 | Return2;
type WrapPageElement2 = GatsbyBrowser['wrapPageElement'] & GatsbySSR['wrapPageElement']; // not what I need