I'm working on the foundation of an enterprise app which will have several different modules worked on by several different teams. This app will have the concept of an Appointment object which will be stored in global state and updated and referenced across the different modules of the app.
This app is written in TypeScript so by default the Appointment object has been designed to have properties with strong types. Eg Appointment.patientInfo.birthDate has a js Date data type, etc. One benefit of this approach is that any module in the app can access Appointment properties knowing that the value will always be the expected data type. Eg a property which should be a date is always guaranteed to be a date.
Otherwise, there could be a risk that ModuleX sets a value incorrectly and ModuleY accesses that global state var and has no idea why the value type is invaid or which module set that value. But one twist on this design is that React components need to get/set those global state object property values in real-time as part of their input onchange events.
Which works seamlessly for properties with string types like Appointment.patientInfo.firstName. But that presents a problem for properties without string types like Appointment.patientInfo.birthDate. Eg it's not possible to bind the input onchange to get/the user input in real-time because that input will be a string while it's being entered and not a Date data type.
So what have you found to be the best patterns for addressing this issue? One option would be to configure all object properties to have a data type of string. Then the proper data type casting could be performed before setting those values to api parameters for example. Some would say that this approach wouldn't leverage the typed feature of TypeScript appropriately, although this would be a simple and straightforward approach.
Another option would be to have a typed object like Appointment and then another version like AppointmentEdit which would have properties with string or any types. Then there would be some type of process which would transfer the values appropriately from the AppointmentEdit object to the Appointment object. That's just a general conceptual idea that came to mind.
So are you aware of any common patterns that are used to help resolve this tricky scenario?
=== UPDATE ===
Here's a specific example:
<input onChange={
x => {dispatch(updateAppointment(
{property: appointmentDate, value:x.target.value}))}}>
</input>
Every time the onChange keypress occurs, the updated value needs to be set to the appointment.appointmentDate global state variable. So if the user has only entered "12" then how would the code manage that? That would throw some type of type error by default I think.
Should a special local function be used to store that value as a local state variable which would ultimately set that value to the global state variable after the value becomes a valid date representation? eg "12/31/2022"?