Home > Software design >  Typescript optional object argument craziness
Typescript optional object argument craziness

Time:11-16

so I am trying to make a object parameter optional, with optional props, and have a default value at the same time:

const myfunc = ({ stop = false }: { stop?: boolean } = { stop: false }) => {
    // do stuff with "stop"
}

this works fine, but notice that crazy function definition!

Any way to not repeat so much code?

CodePudding user response:

I would probably write this like this:

interface MyFuncOptions {
  stop: boolean;
}
const myFunc = (options: Partial<MyFuncOptions> = {}) => {
  const defaultOptions: MyFuncOptions = {
    stop: false,
  };
  const finalOptions = {
    ...defaultOptions,
    ...options
  }
  const { stop } = finalOptions;
  // ...
}

CodePudding user response:

While this question is really opinionated, I see a small logical improvement here, you can set the default value to an empty object:

const myfunc = ({ stop = false }: { stop?: boolean } = {}) => {
    // do stuff with "stop"
}

Anyway I agree that this is not really readable and I used to code like that for quite some time. At some point I realized that it's much more readable if you split this statement:

interface MyFunctionArgs {
  stop?: boolean
}

const myfunc = (myArgs: MyFunctionArgs = {}) => {
    const { stop = false } = myArgs;
    // do stuff with "stop"
}

All in all I would say that TypeScript gives you a lot of ways to implement the same thing, which has its up- and downsides.

CodePudding user response:

From what I can gather your after where if you don't supply any params, stop = false is default, if you do select some params but leave out stop, stop is also false.

This is how I would do it ->

const myfunc = (p: {stop?: boolean} = { stop: false }) => {
    // do stuff with "stop"
    const {stop = false} = p;
    console.log(stop);
}


myfunc({stop: false});   //stop = false
myfunc({stop: true});    //stop = true
myfunc({});              //stop = false
myfunc();                //stop = false

Adding extra params doesn't get any more complicated either.

const myfunc = (p: {stop?: boolean, start?: boolean} = 
  { stop: false, start: false }) => {
    // do stuff with "stop"
    const {stop = false, start = false} = p;
    console.log(stop, start);
}


myfunc({stop: false});              //false false
myfunc({stop: true, start: true});  //true  true
myfunc({});                         //false false
myfunc();                           //false false 
myfunc({start: true});              //false true
  • Related