Typescript : Can't set default parameter value as false

Question

I've a method which has some optional parameters, like this ,

initializeInteraction(opts: { type?: string; freehand?:boolean= false }) {
    this._draw = this.drawService.initDraw({ drawtype: opts.type });
    this._drawInteraction = this._draw.interaction;
    this.mapService.addVector(this._draw.vector);
    this.mapService.addInteraction(this._drawInteraction);
  } 

I want to set the value of freehand as true only when needed , otherwise I want it as false,

but when i declare this

initializeInteraction(opts: { type: string; freehand?:boolean= false }) {}

Im getting an error as

[ts] A type literal property cannot have an initializer. [1247]

Solution 1

You just need to set the default value of freehand no need for ? it's already optional consider this

function initializeInteraction(type: string, freehand: boolean = false) {
 console.log(type,freehand);
 // your magic
}

initializeInteraction('something');
initializeInteraction('something', false);
initializeInteraction('something', true);

the only advantage of making the parameters as object is you can pass them with different order

function initializeInteraction(opt:{ type:string , freehand?:boolean}) {
  let { type, freehand = false } = opt;
  console.log(type,freehand); 
  // your magic
}

you can short the function above like this

function initializeInteraction({type,freehand=false }: {type:string,freehand?:boolean}) {
  console.log(type,freehand);
  // your magic
 }

pass the parameter as object

initializeInteraction({ type: 'something', freehand: false });
initializeInteraction({freehand: false, type: 'something' });
initializeInteraction({type: 'something' });

both ways will give the same result 👍👍 , but they call initializeInteraction differently

f('') ,f('',true) or ({type:'',freehand:true}) f({freehand:true,type:''}) , f({type:''})

Solution 2

Do you really need to wrap type and freehand up in the opts object?

I'd suggest this:

initializeInteraction(type: string, freehand?: boolean = false) {
    this._draw = this.drawService.initDraw({ drawtype: type });
    this._drawInteraction = this._draw.interaction;
    this.mapService.addVector(this._draw.vector);
    this.mapService.addInteraction(this._drawInteraction);
}

would work for the current implementation of initializeInteraction.

Edit:

The other option would be to use overloads...

initializeInteraction(type: string);
initializeInteraction(freehand: boolean);
initializeInteraction(type: string, freehand: boolean);
initializeInteraction(param1: string | boolean, param2: boolean = false) {
    //type checking and implementation here...
}

This would allow you to pass either one of your values alone, or both.

Solution 3

{ type: string; freehand?: boolean = false }

This type literal performs the same role as an interface and therefore can't provide a default value. Fortunately, the value of freehand will be undefined (falsey) by default.

You can safely replace this with

initializeInteraction(opts: { type?: string; freehand?:boolean }) {
    // ...
    if (opts.freehand) {
        // Do stuff
    }
}

Comments

[AhammadaliPK]

Yes , I want to wrap it , Because if you didn't wrap it , you always wants to keep the order when invoking your method , for example and if I want to omit first variable if I call your method like this initializeInteraction(true) it will make error , because the first parameters is string

[AhammadaliPK]

and created a workaround like this , initializeInteraction(opts: { type?: string; freehand?: boolean }) { this._draw = this.drawService.initDraw({ drawtype: opts.type, freehand: opts.freehand || false }); this._drawInteraction = this._draw.interaction; this.mapService.addVector(this._draw.vector); this.mapService.addInteraction(this._drawInteraction); }

[Muhammed Albarmavi]

you can't set the parameter as optional when you give it a default value Parameter cannot have question mark and initializer.