what i'm trying to accomplish here is to be able to use the function in a way that if:
you provided arguments it works with the provided arguments, yet if arguments were not provided it would use the default values.
the problem i have is that the following code, has no typescript error but in runtime when the function is called like testingInterfacesFunction() i get this error:
Cannot read properties of undefined (reading 'title')
interface Success {
onSuccess: (x: any) => void | null
successTitle: string
successSubtitle: string
successIcon: "success" | "info" | "error" | "question" | "warning"
}
interface Denial {
onDenied: (x: any) => void | null
denialTitle: string
denialSubtitle: string
denyIcon: "success" | "info" | "error" | "question" | "warning"
}
interface Dismiss {
onDismissed: (x: any) => void
dismissTitle: string
dismissSubtitle: string
dismissIcon: "success" | "info" | "error" | "question" | "warning"
}
interface Extra {
confirmButton: string
cancelButton: string
focus: boolean
}
interface Params {
title: string
subTitle: string
icon: "success" | "info" | "error" | "question" | "warning"
success: Success
deny: Denial
dismiss: Dismiss
extra: Extra
}
const testingInterfacesFunction = (params: Params) => {
const {
title = "",
subTitle = "",
icon = "question",
success: { onSuccess = null, successTitle = "", successSubtitle = "", successIcon = "success" },
deny: { onDenied = null, denialTitle = "", denialSubtitle = "", denyIcon = "error" },
dismiss: { onDismissed = null, dismissTitle = "", dismissSubtitle = "", dismissIcon = "error" },
extra: { confirmButton = "done", cancelButton = "cancel", focus = false }
} = params
... the body of the function ...
}
i even tried to console.log the title, but seems like the code doesn't react to the body of the function at all...
all i want to do is to have a function that optionally accepts these properties while if it's not provided it uses the defaults, how can i accomplish such a thing?
if you want a default value you need to do the destruction in the arguments of the function
You can use "defaults" in destructuring as well:
(function test({a = "foo", b = "bar"} = {}) {
console.log(a + " " + b);
})();
This is not restricted to function parameters,
but works in every destructuring expression.
Something like this:
const testingInterfacesFunction = (params: {
title = "",
subTitle = "",
icon = "question",
success: { onSuccess = null, successTitle = "", successSubtitle = "", successIcon = "success" },
deny: { onDenied = null, denialTitle = "", denialSubtitle = "", denyIcon = "error" },
dismiss: { onDismissed = null, dismissTitle = "", dismissSubtitle = "", dismissIcon = "error" },
extra: { confirmButton = "done", cancelButton = "cancel", focus = false }
}) => Params {
... the body of the function ...
}
testingInterfacesFunction( {title: "aTitle", icon:"anIcon"} )
If you want to default individual elements within success or dismiss, you need to de-structure those with additional code.