how to provide default value while destructing interfaces inside interfaces in typescript?-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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.