locked
How to Pass IndexedDB Data to Blazor using TypeScript During Initialization RRS feed

  • Question

  • User-343630552 posted

    I am trying to learn how to use TypeScript to access an IndexedDB and to then pass the data to a Blazor app as part of its initialization.  I am running into a problem doing this with TypeScript. 

    In particular, I'd like to open the database on initialization of the app, read the data that's in it after it opens, and then automatically pass that data to Blazor where it will be stored in one or more Singleton Services classes for use by various Blazor components.  I have been able to make this work by:

    1.  Invoking a native JavaScript function from the OnAfterRender Blazor event handler.  This function opens the database inside a Promise (Promise 1).

    2.  Promise 1's success function then reads the data inside a 2nd Promise (Promise 2).

    3.  Promise 2's success function then sends the data to Blazor using DotNet.invokeMethodAsync.  This interface passes the data as an objects array (i.e. no need to serialize and deserialize json, though that is not important given the small data volume).

    This must be done (apparently) using native JavaScript because TS doesn't recognize DotNet.  So, I'd like to know if there's a straightforward way to accomplish my object using TS (because of the strong typing and Intellisense support it provides).   As an alternative to my current approach, perhaps there's a way to have Blazor call TS using some sort of event signalling.  If there's a way to do that, I gather the data would have to be passed as json since the JSRuntime.InvokeAsync interface that calls TS/JS from Blazor can only return a string.

    I hope this all makes sense.  Any thoughts would be appreciated.  Steve

    Saturday, June 27, 2020 4:04 PM

Answers

All replies

  • User-821857111 posted

    I'm not sure your understand the relationship between TypeScript and JavaScript. The output of TypeScript is JavaScript. In other words, you use TypeScript to produce JavaScript.  It is not a replacement for JavaScript. 

    Monday, June 29, 2020 7:50 AM
  • User-343630552 posted

    Thanks for the observation, Mike.  But I do understand what you say about TS and JS.  I want to code in TS to get the benefits that it was created to provide within Visual Studio, most notably the strong type checking and Intellisense assistance while coding.  Unfortunately, the lack of access to the DotNet object from TS makes that convoluted at best (and perhaps impossible?) for the use case I am describing. 

    Thanks again.  Steve 

    P.S.  Beyond the DotNet object limitation, it does appear there's another downside to using TS within a Blazor Wasm app in Visual Studio, for now.  The debugger sometimes (circumstances unclear) doesn't let me set break points in the TS file, but it will allow them in the generated JS file.  Since the generated JS file has different line numbers due to minimization, exception message don't indicate the TS line that's involved.  Also, I end up inadvertently changing code in the generated JS file, only to realize that I need to redo it in the TS file.  I gather the Blazor Wasm team knows there are debugging problems like this.  But I'm still willing to put up with that to get the TS benefits I mention.

    Monday, June 29, 2020 12:47 PM
  • User-474980206 posted

    a couple things:

    1) if the debugger is not showing the typescript code, then you are not building the map files.

    2) DotNet is just a global object on window (window.DotNet). You may need to create you own typing for the DotNet methods to use TypeScript (I prefer es2020 over typescript, so can not help you there). 

    but you can get the typing from the source (they are all public urls)

        https://github.com/dotnet/aspnetcore/tree/758ca19edc0699435f8845ef82f3e3e17fae59b6/src/Components/Web.JS/src

    here I believe are the ones you want:

        https://registry.yarnpkg.com/@dotnet/jsinterop/-/jsinterop-0.1.1.tgz#f54ba865f241596ea3744f28634454a160476399

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 29, 2020 3:55 PM
  • User-343630552 posted

    Thanks, Bruce. I am very new to web development and therefore can get over my head quickly.

    Re the debugger problem, I have map files for my typescript files, driven I gather by a "sourceMap": true directive in the tsconfig.json file.  I just deleted the generated js and map files for one of my ts files that has a load error in Chrome and they did regenerate as part of a re-build.  But the load error persists.  Perhaps there is some other tsconfig setting that's wrong/missing. I'll have to dig into that.

    Re the DotNet question, you have solved the problem.  I have come across references to d.ts files several times in my reading about ts, but didn't bother to really understand what role they play.  Your very helpful tgz file turned the light bulb on for me.  I simply had to add the Microsoft.JSInterop.d.ts file to my ts code folder and triple-slash reference it in the ts files that need to use DotNet methods.  So simple. 

    Thanks so much.  Steve

    Tuesday, June 30, 2020 1:26 PM