InertiaJS, Ziggy & Typescript : No overload matches this call

92 views Asked by At

I am using InertiaJS, with the Ziggy package to map Laravel routes with Vue, and Typescript.

When I run the build script with npm ("build": "vue-tsc && vite build"), I get this error :

Overload 1 of 2, '(name?: undefined, params?: RouteParamsWithQueryOverload | RouteParam | undefined, absolute?: boolean | undefined, config?: Config | undefined): Router', gave the following error.
    Argument of type '"api.product"' is not assignable to parameter of type 'undefined'.
Overload 2 of 2, '(name: string, params?: RouteParamsWithQueryOverload | RouteParam | undefined, absolute?: boolean | undefined, config?: Config | undefined): string', gave the following error.
    Argument of type '{ ean: string | null; domain: string | null; }' is not assignable to parameter of type 'RouteParamsWithQueryOverload | RouteParam | undefined'.
      Types of property 'ean' are incompatible.
        Type 'string | null' is not assignable to type 'RouteParam | undefined'.
          Type 'null' is not assignable to type 'RouteParam | undefined'.

19         window.open(route('api.product', {ean: ean.value, domain: domain.value}), '_blank');

So the line causing this error is :

window.open(route('api.product', {ean: ean.value, domain: domain.value}), '_blank');

Here are the types definition for ziggy (file node_modules/@types/ziggy-js/index.d.ts) :

// Type definitions for ziggy-js 1.3
// Project: https://github.com/tightenco/ziggy#readme
// Definitions by: Ben Allfree <https://github.com/benallfree>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// Minimum TypeScript Version: 3.6

import * as H from "history";

export interface Routable {
    id: number | string;
}

export type RouteParam = Routable | string | number | boolean;

export type RouteParams = { [key: string]: RouteParam } | RouteParam[];

export interface QueryParams {
    [key: string]: QueryParams | string | number | boolean;
}

export type RouteParamsWithQueryOverload =
    | RouteParams
    | {
        _query: QueryParams;
    };

export interface Route {
    uri: string;
    methods: Array<"GET" | "HEAD" | "POST" | "PATCH" | "PUT" | "OPTIONS" | "DELETE">;
    domain?: null | string | undefined;
}

export interface Config {
    routes: {
        [key: string]: Route;
    };
    url: string;
    port?: number | null | undefined;
    location?: H.Location;
    defaults: {
        [key: string]: string | number;
    };
}

export class Router extends String {
    /**
     * Get the name of the route matching the current window URL, or, given a route name
     * and parameters, check if the current window URL and parameters match that route.
     *
     * @example
     * // at URL https://ziggy.dev/posts/4 with 'posts.show' route 'posts/{post}'
     * route().current(); // 'posts.show'
     * route().current('posts.index'); // false
     * route().current('posts.show'); // true
     * route().current('posts.show', { post: 1 }); // false
     * route().current('posts.show', { post: 4 }); // true
     */
    current(): string | undefined;
    current(name: string, params?: RouteParamsWithQueryOverload): boolean;

    /**
     * @deprecated since v1.0, use `has()` instead.
     */
    check(name: string): boolean;

    /**
     * Check whether the given route exists.
     */
    has(name: string): boolean;

    /**
     * Get all parameter values from the current window URL.
     *
     * @example
     * // at URL https://tighten.ziggy.dev/posts/4?lang=en with 'posts.show' route 'posts/{post}' and domain '{team}.ziggy.dev'
     * route().params; // { team: 'tighten', post: 4, lang: 'en' }
     */
    get params(): RouteParams;

    toString(): string;

    valueOf(): string;
}

declare function route(
    name?: undefined,
    params?: RouteParamsWithQueryOverload | RouteParam,
    absolute?: boolean,
    config?: Config,
): Router;

declare function route(
    name: string,
    params?: RouteParamsWithQueryOverload | RouteParam,
    absolute?: boolean,
    config?: Config,
): string;

export default route;

Where is the incompatibility or issue?

Thank you.

0

There are 0 answers