Add example using TypeScript in webviews

[adamerose]

Currently the docs and examples have all webview logic inside a .js IIFE [1] or a raw string [2]. I would prefer to have all my extension code in TypeScript including the webview logic and the message passing between my extension and webview. I think a new example template showing how to properly do this would be very helpful.

I was able to find some unofficial resources on this [3 - 7] but testing and putting everything together isn't trivial and I'd rather not have to roll my own separate config and build process.

Reference

1. https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/media/main.js
2. https://code.visualstudio.com/api/extension-guides/webview#passing-messages-from-a-webview-to-an-extension
3. https://stackoverflow.com/questions/54135313/webview-extension-in-typescript
4. https://stackoverflow.com/questions/71077130/vscode-extension-custom-editor-with-webview-both-on-typescript
5. https://stackoverflow.com/questions/56237448/how-to-make-acquirevscodeapi-available-in-vscode-webview-react
6. https://github.com/rebornix/vscode-webview-react
7. https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/docs/getting-started.md#update-esbuild-config

[adamerose]

Actually now that I've spent more time reading, it seems like this is exactly what I wanted: https://github.com/microsoft/vscode-webview-ui-toolkit-samples

I think this repo should be mentioned in the VS Code webview docs because it seems like this is the 'right' way to develop a webview extension for anyone starting a new project.

[VSCodeTriageBot]

Please ask your question on StackOverflow. We have a great community over there. They have already answered thousands of questions and are happy to answer yours as well. See also our issue reporting guidelines.

Happy Coding!