DEV Community

Cover image for Typescript Intellisense and the Interface
John Peters
John Peters

Posted on

Typescript Intellisense and the Interface

Given: An interface definition like this:

export interface InjectDetails {
        /**
         * Optional.
         * If allFrames is true, implies that the JavaScript or CSS should be injected into all frames of current page. By default, it's false and is only injected into the top frame.
         */
        allFrames?: boolean;
        /**
         * Optional. JavaScript or CSS code to inject.
         * Warning: Be careful using the code parameter. Incorrect use of it may open your extension to cross site scripting attacks.
         */
        code?: string;
        /**
         * Optional. The soonest that the JavaScript or CSS will be injected into the tab.
         * One of: "document_start", "document_end", or "document_idle"
         * @since Chrome 20.
         */
        runAt?: string;
        /** Optional. JavaScript or CSS file to inject. */
        file?: string;
...
Enter fullscreen mode Exit fullscreen mode

We make a declaration to use it as shown here:

let details
  :chrome.tabs.InjectDetails
Enter fullscreen mode Exit fullscreen mode

We find; however, that this code doesn't work.

details.code = "";
Enter fullscreen mode Exit fullscreen mode

Just hovering over the name 'details' shows the error.

Alt Text

It tells us to assign a value before using.

let details
 :chrome.tabs.InjectDetails 
    = {}
details.code="";
Enter fullscreen mode Exit fullscreen mode

If we hover over "details" now, we see all the property definitions.

Alt Text

Intellisense is the single best way to learn an API, as we code! It also support the JSDOC shown above.

Typescript Intellisense Reference

JWP2021 Intellisense and the Interface

Discussion (0)