DEV Community

loading...

Destructure Optional Params in Typescript

Matt Gregg
Full stack developer. Specialize in Vue, React, Firebase, and Django.
Originally published at codegregg.com ・1 min read

Sometimes you have a function with an optional Object argument that you want to destructure in the function. Like so:

interface SomeObject {
  option1: boolean;
  stuff: boolean;
}

function foo(param?: SomeObject) {
  const { stuff } = param;
}
Enter fullscreen mode Exit fullscreen mode

However you'll get an error because param could be undefined and TS doesn't like you trying to destructure something that's undefined. There are a couple ways around this...

Define a fallback in the initializer and don't use the ? optional identifier:

function foo(param: SomeObject = {}) {
  const { stuff } = param;
}
Enter fullscreen mode Exit fullscreen mode

Use nullish coalescence:

function foo(param?: SomeObject) {
  const { stuff } = param ?? {};
}
Enter fullscreen mode Exit fullscreen mode

Or just call the propery on the parameter directly with optional chaining:

function foo(param?: SomeObject) {
  anotherFunction(param?.stuff);
}
Enter fullscreen mode Exit fullscreen mode

All of these work and will handle param being undefined.

Discussion (0)