petite-vue Directives with async function calls

Terry 0
Viewed 13

I've need to create a petite-vue directive that allows for async calls...however, I get the TypeScript error:

Argument of type '(ctx: DirectiveContext) => Promise' is not assignable to parameter of type 'Directive'. Type 'Promise' is not assignable to type 'void | (() => void)'.

const app = PetiteVue.createApp({ count: 1 });
app.directive("my-dir", async ctx => {
    const response = await someGlobalAsync();
    // use response to do something...
});
app.mount("#myElement");
petite-vue async-await javascript
1 Answers

For anyone that has this issue, I solved by changing original d.ts...

interface PetiteVueApp {
    directive(name: string, def?: Directive<Element> | undefined): Directive<Element> | any;
}
interface Directive<T = Element> {
    (ctx: DirectiveContext<T>): (() => void) | void;
}

To:

interface PetiteVueApp {
    directive(name: string, def?: AsyncDirective<Element> | Directive<Element> | undefined): Directive<Element> | any;
}
interface AsyncDirective<T = Element> {
    (ctx: DirectiveContext<T>): Promise<(() => void) | void>;
}
interface Directive<T = Element> {
    (ctx: DirectiveContext<T>): (() => void) | void;
}
Terry0
Related