Wails: Missing declaration file for typescript

[pietdevries94]

I personally use typescript for my javascript projects. I could // @ts-ignore everything, but I made this small declaration file which add the declarations for everything that wails adds. I added the default basic call from the templates.

interface backend {
  basic(): Promise<string>;
}

type logFunction = (message: string) => void;

interface wails {
  Browser: {
    OpenURL(url: string): Promise<void>;
    OpenFile(url: string): Promise<void>;
  };
  Events: {
    Emit(eventName: string, ...optionalData: any[]): void;
    On(eventName: string, callback: (...optionalData: any[]) => void): void;
  };
  Log: {
    Debug: logFunction;
    Error: logFunction;
    Fatal: logFunction;
    Info: logFunction;
    Warning: logFunction;
  };
}

declare global {
  interface Window {
    backend: backend;
    wails: wails;
  }
}

declare const Bridge: {
  Start(callback: () => void): void;
};

export default Bridge;

I could add a pull request, but I first want to know if you guys want it, and how.

[bh90210]

hi @pietdevries94

for contribution guidelines please see here: https://wails.app/development/ and yes every contribution is welcome :)

for the Angular template yes, I resorted to // @ts-ignore (is your fix for angular or more general?)

[leaanthony]

This is awesome and works well with the current runtime refactor. The only thing would be that this file consists of 2 parts, static for the runtime and dynamic for your bound methods. I've been toying with adding a generate mode for building somethhing like this anyway so this is totally in scope. The runtime has recently been refactored and maybe the best thing is to port that to TS. I'm OK doing this but if you fancy it, feel free 😃 Regarding the types file for your bound methods, I was thinking of dynamically generating a 'backend' module that's installed in the project's frontend dir. So wails generate bindings would do that part, then you can simply import the module and get code completion etc, even if you aren't using typescript.

Thoughts?

[pietdevries94]

I'm totally down to create a pull request to implement that. I should have time to build that next week.

We could add a boolean to project.json, called typescriptbindings. This would add the static and dynamic bindings when you call wails serve or wails build. I would prefer this instead of a separate command.

[leaanthony]

Awesome! I'm thinking that the typings may be useful anyway. I believe VSC, for one, reads this up so you can get code completion etc, even when using standard JS. So maybe we should just have a runtime.d.ts that's part of the runtime package and then auto generate the backend typings?

[leaanthony]

Having thought about this and experimented at length, I think the developer facing runtime library needs to be a thin wrapper around the real runtime library. The reason is that there is a very specific dependency order that must be maintained and conflating the real runtime with the frontend code is actually a very tricky thing to achieve without it getting messy.

The order of execution is roughly:

Inject Runtime -> Inject Bindings -> Inject User CSS -> Inject User JS

The initial injection enables the rest so bundling it in the final step is a no go. However, what we can do is have a thin runtime library used by the user which contains the type definitions as well as the public API of the runtime. That way it stops people guessing what the calls are plus gives us a proxy that should allow us to refactor things in the future without (hopefully) breaking APIs.

I'll get something up quickly and drop a link here 👍

[leaanthony]

Sorry this took longer than expected. It led to some significant changes to how the runtime would interact with the core system!

The runtime library from the user's perspective is located here. This is a published package so to test you may need to copy your file to your project manually (Should be in /frontend/node_modules/@wailsapp/runtime).

Let me know if I can do anything to help and thank you for your patience!

[leaanthony]

Autogeneration of the types will be possible, and this should go in a package like "@wailsapp/backend". The idea being that you can import it and reference your methods directly with typing information. EG:

import { Backend } from "@wailsapp/backend";

let result = await Backend.basic()

The fly in the ointment for this, is that type information is calculated at runtime and unfortunately, there's no way to know the name of the parameters. However, it may be sufficient for the first attempt.

Further enhancements would need to parse Go files, deduce what has been bound, then extract all the details from there. This has the benefit of also pulling in comments/docs. However, this is quite hard to solve (what if you import your bound struct from an external package?).

Thoughts?

[pietdevries94]

Hey, I told you that I would look into this this week, but I had a busy week and the next two weeks I'm out of the country. After that I'm still willing to pick this up.

[leaanthony]

No worries @pietdevries94! Thanks for letting us know. I'm pushing hard for it so you may come back to a version that supports this 👍

[leaanthony]

Hey @pietdevries94, there's been a fair bit of work on this that we'd like to test. Are you still available for this? Everything is in place to add the .d.ts file to the runtime.

[leaanthony]

@pietdevries94 - if you are unavailable for testing this, we may just put it on hold until after v1.0.0. Let us know. Thanks.

[pietdevries94]

Sorry, yes, I'm currently really busy with personal stuff. It's totally fine to let this wait till after v1.0.0. Sorry for the late response.

[leaanthony]

Closing for now and listing on the https://github.com/wailsapp/wails/wiki/Post-V1-Enhancements page

[PrettyBoyHelios]

Is there any place where I can find some docs on how to start a project with Wails, React and Typescript? I don't seem to find any, otherwise how can I implement this fix?

[leaanthony]

We don't. The only thing you need to do is create a standard react project using wails init then make sure that whatever you do in the frontend directory (and you can do anything you like), you make sure npm run build creates assets with the same names as the original javascript version. If you are targeting Windows, make sure you read the Windows Developer Guide and perhaps look at the React Router Guide. I think the experimental generation of typescript declaration files for your Go methods may not be currently working.

If you do this, please consider writing a short guide we can add to the Guides section.