🔧 Fixing “Index Signature” Errors in Inertia's useForm with TypeScript

anRecky — Tue, 06 May 2025 13:41:57 +0000

When developing a web app with Laravel 12, Inertia.js, React.js, and TypeScript, I ran into a subtle but frustrating TypeScript error when using useForm from Inertia.

I defined my form shape using an interface, like this:

interface DepartmentForm {
  name: string;
  abbr: string;
  degree: 's1' | 's2';
  vision: string | null;
  mission: string | null;
  description: string | null;
  order: number | null;
  photo_url?: string;
}

Then passed it into useForm:

const { data, setData, post, processing, errors, reset } = useForm<DepartmentForm>({
  name: '',
  abbr: '',
  degree: 's1',
  vision: '',
  mission: '',
  description: '',
  order: 0,
  photo_url: '',
});

But TypeScript complained about the index signature not being compatible — something like:

Type 'DepartmentForm' does not satisfy the constraint '{ [key: string]: any; }'

✅ The Fix: Use a `type` Instead

Changing the interface to a type fixed it immediately:

type DepartmentForm = {
  name: string;
  abbr: string;
  degree: 's1' | 's2';
  vision: string | null;
  mission: string | null;
  description: string | null;
  order: number | null;
  photo_url?: string;
};

No more type errors!

💬 Why does this happen?

interface in TypeScript doesn’t allow excess properties unless an index signature is explicitly declared. On the other hand, type is more flexible when passed to generic utilities like Inertia's useForm that expect dynamic key access ([key: string]: any).

I hope this helps someone out there who's scratching their head like I was. If you've encountered similar quirks with Inertia and TypeScript, feel free to share in the comments!

DEV Community: anRecky

🔧 Fixing “Index Signature” Errors in Inertia's useForm with TypeScript

✅ The Fix: Use a type Instead

💬 Why does this happen?

✅ The Fix: Use a `type` Instead