TypeScript instanceof not working while method argument is not a plain object

Question

I have a method that is called from two places where the argument type is known. In this method, the incoming argument is checked for both types yet both return false. I don't understand why this is happening. I've read the question someone else posted who had the same issue. But my problem is different because I am not constructing a plain object like he is. The question can be found here:

TypeScript instanceof not working

Here is the method that causes the problem:

  changeUnitOfValueInput(filter){
    console.log((filter === undefined));
    let filterType: string;
    if (filter instanceof HTMLInputElement)
        filterType = (filter as HTMLInputElement).value;
    else if (filter instanceof AdvancedFilter){
      console.log("its in");
        filterType = (filter as AdvancedFilter).advancedFilterSubject;
    }
    else{
      console.log('im out');
       return;
    }
    switch(filterType){
      case AdvancedFilterSubject.GROWTH_TEMPERATURE:{
        this.unitLabel = (this.filterOptionsForm.controls['measureSystem'].value ==='imperial') ? '&#176;F' : '&#176;C';
        break;
      }
      case AdvancedFilterSubject.GROWTH_DAYS:{
        this.unitLabel = 'days'
        break;
      }
      //fall through
      case AdvancedFilterSubject.PLANT_HEIGHT:
      case AdvancedFilterSubject.PLANT_SPACING:
      case AdvancedFilterSubject.ROW_SPACING:
      case AdvancedFilterSubject.SOW_DEPTH:
        this.unitLabel = (this.filterOptionsForm.controls['measureSystem'].value ==='imperial') ? '&Prime;' : '&#13213;';
    }
  }

This method is called in this component method:

  populateFieldsWithSelectedFilterData(existingAdvancedFilter: AdvancedFilter){
    this.changeUnitOfValueInput(existingAdvancedFilter);
    this.filterOptionsForm.controls['filterType'].setValue(existingAdvancedFilter.advancedFilterSubject);
    this.filterOptionsForm.controls['logicalOperator'].setValue(existingAdvancedFilter.logicalOperator);
    this.filterOptionsForm.controls['advancedFilterValue'].setValue(existingAdvancedFilter.filterValue);    
  }

The second place where it gets called is in the frontend (html part):

    <p-dropdown #filterType formControlName = "filterType" placeholder="Filter type" [options]="filterTypesList" (onChange)="changeUnitOfValueInput(filterType)" >
    </p-dropdown>

The method keeps returning prematurely because both instanceof conditions return false. Can anyone tell me what is going on?

EDIT: Heres the definition of filterTypeList that is used in the HTML

  filterTypesList: SelectItem[] = [
    {label:'Minimum temperature', value: AdvancedFilterSubject.GROWTH_TEMPERATURE},
    {label:'Growth days', value: AdvancedFilterSubject.GROWTH_DAYS},
    {label:'Maximum height', value: AdvancedFilterSubject.PLANT_HEIGHT},
    {label:'Row spacing', value: AdvancedFilterSubject.ROW_SPACING},
    {label:'Plant spacing', value: AdvancedFilterSubject.PLANT_SPACING},     
    {label:'Sow depth', value: AdvancedFilterSubject.SOW_DEPTH}  
    ];

Explosion Pills · Accepted Answer · 2018-09-11 17:09:40Z

1

In order for instanceof to work, the prototype of the object you're using has to match the constructor function; HTMLInputElement or AdvancedFilter in this case. This won't necessarily be the case depending upon how the AdvancedFilter gets constructed. You may be better off creating a type guard function:

function isAdvancedFilter(possibleAdvancedFilter: any): possibleAdvancedFilter is AdvancedFilter {
  return possibleAdvancedFilter &&
    !!(possibleAdvancedFilter as AdvancedFilter).advancedFilterSubject;
}

You can of course change this function to whatever checks you need to do to ensure that the value can be used as an AdvancedFilter. Then just use isAdvancedFilter(variable) instead of instanceof variable.

answered Sep 11, 2018 at 17:09

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Maurice Over a year ago

can you explain this method a bit more? what does !! do? I've never seen this before. I know a single ! negates, but what does !! do exactly?

Explosion Pills Over a year ago

The !! is for a boolean cast -- it's basically checking that .advancedFilterSubject exists and is not falsey. You could also probably do possibleAdvancedFilter.hasOwnProperty('advancedFilterSubject')

Maurice Over a year ago

also, why should i use possibleAdvancedFilter is AdvancedFilter ? Why not boolean?

Explosion Pills Over a year ago

No, it's a value cast not a type cast. !!0 === false for example

Maurice Over a year ago

visual studio IDE does not indicate that something of type any has the property .hasOwnProperty. Are you sure i can use this?

|

Collectives™ on Stack Overflow

TypeScript instanceof not working while method argument is not a plain object

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related