So I have a Form component in react which takes props to handle various different situations. As I am using it for an online store it will mostly be sending input data to the server, and it needs to work with zod and infered tRPC typings. and I made this generic type, which I thought would mean I can pass either login data or signup data and it would work either way.
export type FormType<T extends SignUpForm | LoginForm> = T extends SignUpForm ? SignUpForm : LoginForm;
Instead I get this error in the form component
value={form[types]} // form refers to state object
// const form: SignUpForm | LoginForm Element implicitly has an 'any' type
// because expression of type 'string' can't be used to index type 'SignUpForm | LoginForm'
and this error in the parent element
onResponse={handleRequest} // onResponse refers to Forms callback hook
Type '(data: SignUpForm) => Promise<void>' is not assignable to type
'(data: SignUpForm | LoginForm) => Promise<void>'.
Types of parameters 'data' and 'data' are incompatible.
Type 'SignUpForm | LoginForm' is not assignable to type 'SignUpForm'.
Type 'LoginForm' is missing the following properties from type 'SignUpForm':
firstname, lastname, day, month, yearts(2322)
and the types of each is just an object with strings as values.
This app was also created using create-t3-app if that helps.
I'm not sure If I've explained this well so please feel free to edit this post or ask questions
