Typescript definition for a cefsharp webview interface

Question

I registered a RegisterAsyncJsObject in the CefSharp ChromiumWebBrowser. This creates an additional JavaScript object instance in the web browser which looks like this:

frame.openWindow(name, data);
frame.navigateToWindow(name, data);

It works great with plain JavaScript. I'm able to access to this object and the methods do their job.

Now I want to program against this object with TypeScript, but the TypeScript compiler doesn't know the types of that object. I tried to create a type definition file of that object, but it doesn't really work. it seems if I import a definition / declaration, what ever, it will override the 'frame' object.

Do you have any idea how to use that object in TypeScript ?

Do I really need to have a type definition for that object? And how does it really work?

Until now I just used TypeScript and already done type definitions, but didn't created definitions by my own.

Answer 1

If frame doesn't yet have an existing type, you can define your own:

interface MyFrame {
    //fill in the `any` and `void` types as appropriate
    openWindow(name: any, data: any): void; 
    navigateToWindow(name: any, data: any): void;
}

//if frame is initialized somewhere else:
declare let frame: MyFrame;

//if you want to initialize it here:
let frame: MyFrame = //some initialization code

If frame has an existing type, say HTMLFrameElement from lib.d.ts, then you can add an additional interface to extend the existing one. This is known as declaration merging:

interface HTMLFrameElement {
    openWindow(name: any, data: any): void; 
    navigateToWindow(name: any, data: any): void;
}

This can be done either in a regular Typescript file (.ts) or in a definition file (.d.ts).

---

You can include the interface + declaration in the current file, and that should allow you to use these methods. If you want to place it in an external file, and in order to let the compiler know about the file, do one of the following:

• Include it in the project's tsconfig.json
• Import it into each referencing file with import "/myfile"