I have a simple webpage developed that I use to send text input to an XML RPC server. I got the code working in Javascript but now I'm trying to convert it all to Typescript and use promises with async/await. This is as a learning experiment. It's proving to be a little difficult at my current experience level.
Previous working Javascript code:
import "./mimic.js";
function makeComment() {
const method = "MakeComm";
let request = new XmlRpcRequest("http://localhost:1337/RPC2", method);
request.addParam(document.getElementById("n1")).value;
request.addParam(document.getElementById("n2")).value;
let response = request.send();
console.log(response);
}
As I said above, this function communicates correctly with the XML RPC server. Here is my converted Typescript code:
import "./mimic.js";
const updateCommentBtn: HTMLButtonElement = document.getElementById(
'makeComment',) as HTMLButtonElement;
updateCommentBtn.addEventListener('click', async () => {
const method = "MakeComm";
let request:any = new XmlRpcRequest("http://localhost:1337/RPC2", method);
request.addParam(<HTMLInputElement>document.getElementById("n1")).value;
request.addParam(<HTMLInputElement>document.getElementById("n2")).value;
let response = await request.send();
console.log(response);
});
I'm getting an error:
Uncaught (in promise) ReferenceError: XmlRpcRequest is not defined
at Object.<anonymous> (fileChange.ts:36)
at new Promise (<anonymous>)
at HTMLButtonElement.<anonymous> (fileChange.ts:34)
The XmlRpcRequest call is a function contained in ./mimic.js.
My HTML for the Typescript version:
<p>Make Comment:</p>
<input type="text" id="n1"/>
<input type="text" id="n2"/>
<button id="makeComment">Update Comment</button>
EDIT: mimic.js defines XmlRpcRequest as follows:
function XmlRpcRequest(url, method) {
this.serviceUrl = url;
this.methodName = method;
this.crossDomain = false;
this.withCredentials = false;
this.params = [];
this.headers = {};
};
Thank you for adding your code
You should export the function like this in mimic.js
export const XmlRpcRequest = (url, method) => {
this.serviceUrl = url;
this.methodName = method;
this.crossDomain = false;
this.withCredentials = false;
this.params = [];
this.headers = {};
};
and import it
import { XmlRpcRequest } from "./mimic";
If your typescript linter is giving you gyp you could add definitions for the arguments like so:
export const XmlRpcRequest = (url: string, method: string) => {
this.serviceUrl = url;
this.methodName = method;
this.crossDomain = false;
this.withCredentials = false;
this.params = [];
this.headers = {};
};