I have a function that takes in two different types of objects:
const canBeGenericOrDefaultData = {
id: 123,
pointData: {
square: 'x145',
triangle: 'y145'
}
}
function submitHandler(canBeGenericOrDefaultData: AllTheDatas | GenericAllTheDatas):
buildPointData(canBeGenericOrDefaultData.pointData)
// do something
function buildPointData(pointData: AllTheDatas["pointData"] | GenericAllTheDatas["pointData"])
Here are my interfaces:
interface AllTheDatas{
id: string
pointData: {
square: string
triangle: string
}
}
interface GenericAllTheDatas{
id: string
pointData: {
square: string
triangle: string
}
}
Explanation: We have the two interfaces because we have one default page already in production and another generic page that is still in development. We want to avoid changing the structure of the default page and share the submit handlers for both pages to prevent duplication of service/button handlers.
My question is: Is it correct to declare the function calls inside the submitHandler this way, or is there an easier way to type them?
If I were to add a new type like:
interface AllTheDatas{
id: string
pointData: {
square: string
triangle: string
newForm: string
}
}
interface GenericAllTheDatas{
id: string
pointData: {
square: string
triangle: string
}
}
and receive objects like:
const defaultData = {
id: 123,
pointData: {
square: 'x145',
triangle: 'y145',
newForm: 'x1234'
}
}
const genericData = {
id: 123,
pointData: {
square: 'x145',
triangle: 'y145'
}
}
Can I simply create another interface and extend from GenericAllTheDatas? Is that considered a good practice?