Last post Jun 30, 2020 01:26 PM by CincySteve
Jun 27, 2020 04:04 PM|CincySteve|LINK
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:
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).
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
Jun 29, 2020 07:50 AM|Mikesdotnetting|LINK
Jun 29, 2020 12:47 PM|CincySteve|LINK
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.
Jun 29, 2020 03:55 PM|bruce (sqlwork.com)|LINK
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)
here I believe are the ones you want:
Jun 30, 2020 01:26 PM|CincySteve|LINK
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