How to create conditional types in typescript? - reactjs

Question

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
types.ts
export interface SignUpForm {
firstname: string;
lastname: string;
email: string;
password: string;
day: string;
month: string;
year: string;
}
export interface LoginForm {
email: string;
password: string;
}
export type FormType<T extends SignUpForm | LoginForm> = T extends SignUpForm ? SignUpForm : LoginForm;
hook.tsx
const useSetForm = (component: FormType<SignUpForm | LoginForm>) => {
// component = object, is either SignupForm or LoginForm
const [value, setForm] = useState(component);
return [value, (event: React.ChangeEvent<HTMLInputElement>) => {
setForm((oldValue) => {
return { ...oldValue, [event.target.name]: event.target.value };
});
},
] as const;
};
parent.tsx
const Signup: FC<SignupProps> = ({ }): JSX.Element => {
const handleRequest = async (data: FormType<SignUpForm>) => {
const res = await client.mutation('mongo.sign-up', data);
console.log(res)
}
return (
<Layout>
<div className=''>
<Form
formData={{ firstname: '', lastname: '', email: '', password: '', }}
target={'mongo.sign-up'}
buttons={['day', 'month', 'year']}
onResponse={handleRequest} />
{/** pass types to create input fields, pass endpoint to target, buttons only needs definition for date of birth elements */}
{/** onResponse returns complete form obj */}
</div>
</Layout>
)
}
export default Signup
FormComponent.tsx
interface FormProps {
formData: FormType<SignUpForm>
target: `mongo.${'sign-up' | 'login'}` | `sendgrid.send-email`;
onResponse: (data: SignUpForm | LoginForm) => Promise<void>
};
export const Form: FC<FormProps> = ({ target, onResponse, formData }): JSX.Element => {
const [form, setForm] = useSetForm(formData);
const handleCallback = useCallback((data: SignUpForm | LoginForm) => {
onResponse(data)
// pass data to parent elements
}, [onResponse])
return (
<>
<form onSubmit={handleCallback}>
<>
{Object.keys(formData).map((types) => {
/** type is passed from parent elements, */
return (
<input
key={types}
name={types}
value={form[types]}
type={types}
placeholder={types}
onChange={setForm} />)
//renders form text input elements
})}
</>
<button type='submit' disabled={false}> Submit </button>
</form>
</>
)
}