interface does not satisfy the constraint FieldValues

[kkharji]

Hello @fabian-hiller, very promising library and awesome documentation, thank you.

I'm using auto-generated interfaces for my types, but unfortunately I ran into an error:

Type 'UserAuthLogin' does not satisfy the constraint 'FieldValues'.
Index signature for type 'string' is missing in type 'UserAuthLogin'.

The interface:

export interface UserAuthLogin { login: string, password: string }

Thanks

[fabian-hiller]

Hey @kkharji, thank you for using Modular Forms! That means a lot to me. I am aware of this problem. If you use a type instead of an interface, it works.

The problem is that a form can be nested arbitrarily and I use a recursive type for that. Why TypeScript doesn't then accept an interface as generic, I don't know yet. If you are familiar with TypeScript, you can try to help me here. Otherwise I will ask for advice in the SolidJS community.

[kkharji]

Oh that sucks, I was hoping it was unknown issue. Yes, typescript advance type is hard to get right, let alone supporting interface keyword.

No issues hopefully the rspc generator would be able to generate with type keyword.

Thanks @fabian-hiller

[fabian-hiller]

I am sure there is a solution to this problem. I will try to fix it tomorrow. I will give you an update here.

[fabian-hiller]

As described in this issue, the "problem" has existed in TypeScript for a very long time now. I am not yet aware of a user-friendly workaround that does not compromise type safety. I will let you know as soon as I find a solution.

[fabian-hiller]

Until TypeScript gives us a "better" solution, I recommend using type instead of interface. As an alternative, the workaround of giving an interface an explicit index signature can be used. Below are two examples.

interface LoginForm {
  email: string;
  password: string;
  [name: string]: string;
}

interface LoginForm extends Record<string, string> {
  email: string;
  password: string;
}

This may affect the editor support, so that e.g. autocomplete works only conditionally.

If someone here knows TypeScript very well and thinks he or she can solve the problem by making changes to Modular Forms, I have prepared a minimal TypeScript playground for experimenting. I'm temporarily closing the issue until there are signs that changes to our code can fix the problem.

[vchirikov]

I recommend using type instead of interface

I force to use interfaces with "@typescript-eslint/consistent-type-definitions": "error" and
extends Record<string, string> doesn't work with boolean fields for example, so it's better to use something like this:

interface LoginForm extends FieldValues {
  email: string;
  password: string;
} 

[fabian-hiller]

All solutions I know so far to be able to support interfaces reduce type safety. I have again experimented a bit, but have not come to a satisfactory solution.