How to configure TypeScript for Inertia?
I struggle to make TypeScript work correctly with Inertia. I want to use the Ziggy library for routing, but nothing from the docs is working correctly.
I added @routes in my layout blade tempate and it makes the route() function available globally.
I added it in my custom .d.ts file:
import { route as routeFn } from "../../vendor/tightenco/ziggy";
declare global {
var route: typeof routeFn;
}
I wanted to declare alias ziggy-js, but gave up after an hour or so trying to make it work with VS Code. Nevermind.
It looks like I need to create the tsconfig.json file, because otherwise my global type definition isn't working when the file is closed (yeah).
So I did:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["resources/js"]
}
Now, the problem is that when I use "include": ["resources/js"], I can't import any library anymore. Even import React from "react" is throwing an error:
Could not find a declaration file for module 'react'. '/Users/me/www/inertia-app/node_modules/react/index.js' implicitly has an 'any' type.
How do I make it work?
Please or to participate in this conversation.