Handle Typescript forms and objects

Hello,

I'm currently using Laravel 10, Inertia, and Vue with TypeScript. However, I'm uncertain about the optimal approach for handling data retrieved from the database and data used in forms.

So far, my approach has been to create two interfaces—usually, I work with interfaces most of the time—one for the data retrieved from the database and another for the form data.

For example: export interface Variant extends Form { readonly id: number; name: string; make: Make; user: User; }

export interface VariantForm extends Omit<Variant, "make" | "user">, Form { make_id: number; }

As I'm embarking on a new project, I'm curious if there's a better way to handle this, and I'm eager to learn about your approaches.