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.