How to Enable IntelliSense for IndexedDB and DOM Objects

[Cincy Steve]

I have just started to learn how to develop a client-side web app using Visual Studio 2019 Community on a Windows 10 laptop. The app I am exploring will use an IndexedDB for local storage. In my initial exploration, I have run into situations where VS apparently does not know the type of IndexedDB and DOM objects and therefore IntelliSense is unable to help me discover the object's properties and methods. I discovered that I can use "as any" as a workaround in TypeScript for the error that's triggered by an unknown property or method reference (this generates functional JS code), and that I can alternatively explicitly type cast the object using TypeScript's bracket (<>) notation. The issue is that finding the type of certain objects is not easy. I tried to do this by looking for the type of an "as any" object in the debugger, but that was hit and miss.

So, is there a way to tell VS how to discover IndexedDB and DOM object types so that IntelliSense works seamlessly or, failing that, is there a way in VS to easily find the type of IndexedDB and DOM objects so that I can explicitly cast them instead of using "as any"? If there isn't a way to do either of these using VS, can you at least point me to documentation of the IndexedDB and Html DOM objects that shows the object type that TS will recognize? I have included a few of the examples of where I have and haven't been successful in explicitly type casting.

Thanks. Steve


// Successful DOM casting
var colIndex = (<HTMLTableDataCellElement>elem).cellIndex;
var rowIndex = (<HTMLTableRowElement>elem.parentNode).rowIndex;

// Unsuccessful DOM casting. Statement 1 triggers an error.
// I can't find what object type getElementById returns
let stringKey = (<HTMLElement>document.getElementById("recordNumber")).value;
let stringKey = (document.getElementById("recordNumber") as any).value;

// Successful IndexedDB casting
dbReq.onsuccess = function (event) { myDatabase = (<IDBOpenDBRequest>event.target).result; let x = 1; }
//dbReq.onsuccess = function (event) { myDatabase = (event.target as any).result; let x = 1; }

Continue reading...