How to call a JavaScript function defined on the page from within an SPFx webpart

Question

Updated:

I created a basic SPFx webpart using "yo @microsoft/sharepoint", etc. with typescript version 4.5.5. There are JavaScript functions that are global in the page scope. I need to be able to call such a function from within the webpart. There are no NPM modules or types. For an example, if I had " function sample() { ... } " in a Modern Script Editor webpart, how would I call that sample function from within the SPFx webpart? I cannot find a way to call anything outside of the webpart's "export default class MySampleWebPart extends BaseClientSideWebPart { . . . " Thanks.

Update: I am having one issue. My SPFx webpart is hosted on a page where a vender is injecting JavaScript containing the functions in it; but also defining an object that contains dot-notation functions. When I try to use a dot-notation function in Answer approach 1, the SPFx typescript errors because it thinks I am trying to do an index. For approach 2, the object at the start of the dot-notation is not defined.

An example is a function: "gonative.run.deviceInfo()". I've tried various attempts at the window interface extension like below - it fails with "gonative" not being defined.

declare global {  
    interface Window {  
        gonativerundeviceInfo: (input: string) => string;  
        gonative.run.deviceInfo: (void) => string;  
    }
}

I am using GoNative to create a mobile application that uses a WebView to show a SharePoint Site. The mobile App injects JavaScript objects into the page. The JavaScript bridge between the SharePoint page and the mobile App is described here: GoNative JavaScript Bridge

So, the page ends up with the gonative object and functions on that object that I need to call from the SharePoint page's JavaScript like "gonative.sidebar.setItems(params)".

var gonative = {};  

gonative.sidebar = {  
    setItems: function (params){  
        addCommand("gonative://sidebar/setItems", params);  
    },  
    getItems: function (params){  
        return addCommandCallback("gonative://sidebar/getItems", params);  
    }  
};    

I really appreciate your help.

Answer 1

We can call any global functions from SPFx web part.

Let say below is my function which I have added in my modern script editor web part:

There are two approaches

Approach 1

You can directly call any global function from window object as below:

window["demoFunction1"]("World");

Approach 2

If you want to make it type specific to avoid any run time error then you can extend Window object and provide type of the function and then you will able to call this function with specific type. This is suggested approach.

Extend Type of Window object in your typescript

declare global {
  interface Window {
    demoFunction1: (name: string) => void;
  }
}

Now you will able to call this function with 'window' object like below

window.demoFunction1("World");

Below is the whole code snippet with both the approaches:

import * as React from 'react';
import styles from './CallJsFunction.module.scss';
import { ICallJsFunctionProps } from './ICallJsFunctionProps';
declare global {
  interface Window {
    demoFunction1: (name: string) => void;
  }
}
export default class CallJsFunction extends React.Component<ICallJsFunctionProps, {}> {
  componentDidMount(): void {
    // Approach 1
    window["demoFunction1"]("World");
    // Approach 2
    window.demoFunction1("World");

  }

  public render(): React.ReactElement<ICallJsFunctionProps> {
    const {
      description,
      isDarkTheme,
      environmentMessage,
      hasTeamsContext,
      userDisplayName
    } = this.props;

    return (
      <section className={`${styles.callJsFunction} ${hasTeamsContext ? styles.teams : ''}`}>

      </section>
    );
  }
}
    

Reference Link: https://www.emmanuelgautier.com/blog/typescript-extend-window