How to properly type global route() in TS?

[pReya]

I would really love to know what the proper/nice way is, to add the global route() helper to Typescript. I don't want to install/import from ziggy-js, but rather use the global object and not get Typescript errors. Has anyone ever done that?

[chuoke]

I would really love to know what the proper/nice way is, to add the global route() helper to Typescript. I don't want to install/import from ziggy-js, but rather use the global object and not get Typescript errors. Has anyone ever done that?

Hi, are you figuring out a solution, any share is helpful.

[pabueco]

This worked for me. Not sure it's the optimal way but it's simple and it works.

First install the ziggy types:

yarn add -D @types/ziggy-js
# or
npm install -D @types/ziggy-js

Then in resources/js create a typescript definition file (*.d.ts). The name itself is not relevant but you might call it global.d.ts.
You can of course also place this in a types subfolder if you have other types.

Then paste this into the created file:

import ziggyRouteFunction from "@types/ziggy-js";

// Defines the function in all TS files and the script tags in Vue SFC.
declare global {
    const route: typeof ziggyRouteFunction;
}

// Defines the function in your vue templates.
// You can simply remove this if you are not using vue.
declare module "@vue/runtime-core" {
    interface ComponentCustomProperties {
        route: typeof ziggyRouteFunction;
    }
}

[briantuju]

Thank you for coming up with this.
I am using React instead of Vue, so when I tried your proposed solution, it didn't work when I import @types/ziggy-js, but it worked this way:

import ziggyRouteFunction from "ziggy-js";

// Defines the function in all TS files and the script tags in Vue SFC.
declare global {
  const route: typeof ziggyRouteFunction;
}

[C1C0]

Thank you for coming up with this. I am using React instead of Vue, so when I tried your proposed solution, it didn't work when I import @types/ziggy-js, but it worked this way:

import ziggyRouteFunction from "ziggy-js";

// Defines the function in all TS files and the script tags in Vue SFC.
declare global {
  const route: typeof ziggyRouteFunction;
}

Thank you very much for sharing this. Indeed, it works very well with React.

[virlatinus]

This worked for me in PHPStorm with Laravel+Breeze+Vue. I created a global.d.ts file with the following:

// default is already an alias, so this is an alias
import routeFunc from '../../vendor/tightenco/ziggy/src/js/index.d';

// Defines the function in all TS files and the script tags in Vue SFC.
declare global {
    const route: typeof routeFunc ;
}

// Defines the function in your vue templates.
// You can simply remove this if you are not using vue.
declare module "@vue/runtime-core" {
    interface ComponentCustomProperties {
        route: typeof routeFunc
    }
}

With this change, smart completion was working for route():