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.