- TechDailyFeed - Your Daily Dose of Tech News, AI, Programming, and More

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({ 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!

May 6, 2025 - 14:59

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!