[Sharing] typing support on the web UI part

[timepp]

Hi I would like to share my template which brings types for both front-end and back-end with few simple steps.

What's improved?

You define API interfaces between the web client and the backend script in api.ts:

    export type API = {
        checkResult: (a:number, b:number, res:number) => string,
        getWindows: () => {title:string, className:string}[]
    }

Then you implement the API in api_impl.ts. You also need to do minor work to bind the API to the web client and write thin wrapper in api.ts to add typings for web client:

    export const api: Promisify<API> = {
        checkResult: (a, b, res) => backendAPI.checkResult(a, b, res).then(r => JSON.parse(r)),
        getWindows: () => backendAPI.getWindows().then(r => JSON.parse(r))
    }

Now you can use the typing API in the web client, e.g.:

    import {api} from '../api.js'
    ...
    const windows = await api.getWindows()
    for (const w of windows) {
        const div = document.createElement('div');
        div.innerHTML = `<b>${w.title}</b> (${w.className})`;
        app.appendChild(div);
    }
    document.body.appendChild(app);

Please check my repo here: https://github.com/timepp/deno-webui-typing-template

[AlbertShown]

I see clearly your point, and your template is useful in some specific cases with TSC, therefor, I suggest adding deno-webui-typing-template as an extras template in the Deno webui readme.

Thank you for your suggestions, and thank you for providing a complete working repo for that 👍