Making a TS BlazorAddin

[RaoulRSV]

https://github.com/RaoulRSV/excel-blazor-add-in JS NET6.0

URL linking to the sample that has the bug.

TS version of BlazorAddin disables Blazor

To Reproduce

Steps to reproduce the behavior:

1. download https://github.com/RaoulRSV/excel-blazor-add-in JS NET6.0
2. Run with F5 and check in output console "lancerchaine" message
3. Add Microsoft.TypeScript.MSBuild Nuget
4. Add TSconfig.JSON in BlazorAddin.proj (see under)
5. .Change Pages.Index.razor.js to ts

Expected behavior Run with F5 Output console doesn't show "lancerchaine" message

Screenshots N.A.

Environment

• Platform [PC desktop, Mac, iOS, Office Online]: PC desktop
• Host [Excel, Word, PowerPoint, etc.]: Excel
• Office version number: __
• Operating System: Windows 11
• Browser (if using Office Online): N.A.

Additional context

TSconfig code : <"compilerOptions": { "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "allowJs" : true, "target": "es5", "lib": [ "es6", "dom" ] }, "include": [ "*/", "ES2015", "Dialog.html", "wwwroot/BlazorAddIn.lib.module.ts", "Pages/Index.razor.ts" ], "exclude": [ "node_modules", "wwwroot" ], "types": [ "office-js", "jquery", "node", "blazor" ], "files": ["wwwroot/BlazorAddIn.lib.module.ts","Pages/Index.razor.ts" ], "compileOnSave": true>

To be added on top of TS code : <export { }; declare global { interface Window { lancerchaine: any; }
}>

[davidchesnut]

Hi @RaoulRSV,

I followed steps 1 and 2 to just run the sample from your repo, but it doesn't display a "lancerchaine" message in the VS output window. I haven't got to the TypeScript part yet so wanted to check with you first that I didn't miss some additional step.

Thanks! David

[RaoulRSV]

@davidchesnut . Sorry my fault. The good repository is here. After opening the Excel sheet to run the sample you will have to click on the "No" ribbon tab then click twice on "ouvrir" button. You will then see "lancerchainé29 message in the output console

[davidchesnut]

Hi @RaoulRSV, okay, yep I can sort of repo the problem. What happens now is I get a bunch of TypeScript errors because the JS file does not specify the types. Is it your intent to leave it as JS, but run it through the TypeScript transpiler? Or do you plan to convert it to proper TypeScript?

I'm working to understand more about using TypeScript with Blazor. Most of the content seems focused on JS. so still taking a look at this issue.

Thanks, David

[RaoulRSV]

Hi @davidchesnut . Sorry I have been too quick in my explanations. Additionally : 1) You need to add NPM files (Tools/Command lines ) : npm i @types/blazor__javascript-interop 2) The code to be added on top of Index.razor.js file is : export { }; declare global { interface Window { lancerchaîné: any; } interface Window { initialiser: any; } } 3) You need to delete"Bubble chart" razor page 4) Don't forget to delete Bin folder before running the project 5) Optionally you can type event in index.razor file, like that : (window).initialiser = async (event: Office.AddinCommands.Event) => {

Please note that BlazorAddIn.lib.module.js should stay .js as per tsconfig.json. It seems to be the only correct way to to it, but I may be wrong.

Typescripts errors should now disappear and you should now be able to check that contrary to .js configuration no "lancerchaîné" log appears in the output consol.

Thanks for your time. Raoul

[davidchesnut]

Hi @RaoulRSV,

I'm still working through some TypeScript issues that are probably just on me end. But I notice your code does not call Office.actions.associate. Can you add this line of code after your lancerchaine function as follows and see if it fixes the issue?

(window).lancerchaîné = async (event) => {
// ...
}

Office.actions.associate("lancerchaîné", (window).lancerchaîné);

I think maybe TypeScript changes the namespace in a way that you can't rely on a default mapping to the function name.

Thanks! David

[RaoulRSV]

You were right. Now it works. See here. Please note changes in the TSconfig (+ line 8)

[RaoulRSV]

@davidchesnut I have been too quick in closing this issue. The first run of the project transpiles the js file with an erroneous instruction (line 88) from line 4 in the ts file. After deletion of this js line, the projects runs accordingly (no further transpiling).

No idea on how to correct it.

Raoul

[davidchesnut]

Hi @RaoulRSV,

Not sure why either, but if I change the declaration as follows it works for me:

//export { };
declare module 'global-var' {
    global {
        interface Window {
            lancerchaine: any;
        }
    }
}

[aafvstam]

Not sure why either, but if I change the declaration as follows it works for me:

Where did you put this @davidchesnut ? If I try to run this I get the following:

[davidchesnut]

I put it in the index.razor.ts file (line 5). The errors you are getting are because you need to run the following command in the BlazorAddin Folder to get the types recognized.

npm i @types/blazor__javascript-interop

[aafvstam]

npm i @types/blazor__javascript-interop

Ah... apparently, I also didn't read @RaoulRSV additional comments properly as it was in there as wel 🙄 Also was in doubt why you'd put it in the TS as I was thinking this would be automagically transpiled from .js into .ts but it would be the other way around 😴

[RaoulRSV]

@davidchesnut Your suggestion seems right. Many thanks.

Raoul