How to type an object with optional and default values?

user_1487135 0
Viewed 42

I've an old JavaScript (.js) file with a function like so:

export default ({
  guid,
  numItems,
  lastDate,
  filters = [],
  includeCart = true,
  fetchStuff = true,
  withLove = true
}) => () => {
  // do stuff
}

As you can see, the entries in the argument object is getting long so I'd like convert the file to TypeScript (.ts) and put some constraints around this argument object.

I'd want to do something like this:

interface IPayload {
   guid: string
   numItems: number
   lastDate: string
   filters: string[]
   includeCart?: boolean
   fetchStuff?: boolean
   withLove?: boolean
}

export default (payload: IPayload) => () => { // do stuff }

However, since the argument supplies default values into the function, if I create a TypeScript interface, I can't supply default values. So, if the old function had a statement like:

if (includeCart) { // include the cart }

if the property isn't supplied, it would always default to true but in my refactor, it would be undefined thereby changing the behavior of this function.

How would I properly refactor this bit of function in order to make it more kosher in the TypeScript world?

typescript javascript
2 Answers

You could list the parameters with default values explicitely and use the spread operator to get the rest of the properties in a seperate variable.

const fn = ({ 
    filters = [], 
    fetchStuff = true, 
    withLove = true, 
    ...payload 
  }: IPayload) => { 
  console.log(filters, fetchStuff, withLove, payload)
}

fn({ guid: "", numItems: 0, lastDate: "", filters: [] })

Playground

user_86136300

You can have a typed argument object with individual properties default values, using destructuring as in the original JS version:

interface IPayload {
  guid: string
  numItems: number
  lastDate: string
  filters: string[] // Should be optional as well BTW?
  includeCart?: boolean
  fetchStuff?: boolean
  withLove?: boolean
}

export default ({
  guid,
  numItems,
  lastDate,
  filters = [],
  includeCart = true
  fetchStuff = true
  withLove = true
}: IPayload) => () => { // do stuff }
user_51087960
Related