TypeScript gives warnings on access to object properties

Question

I am working on Angular 4. I was trying to loop object/array using for loop. I am getting output in console but in the build and compile getting errors. Not sure what mistake i am doing.

my data will look like this

let ArrayVal =  [{
       comparator: 'EQ',
       flight: [{
           number: 123
          }, {
           grouping: 'Flight Group South America'
          }]
      }, {
       comparator: 'NEQ',
       flight: [{
           number: 7000,
           endNumber: 7999
          }]
      }];

now i need to fetch numbers from this above data, expected output is numbers = ['123','7000-7999']

so tried something like this

let numbers: any = [];
for ( let val of ArrayVal){
 for (let flight of val.flight) {
    if ( flight.hasOwnProperty('number') && flight.hasOwnProperty('endNumber') ) {
      numbers.push(flight.number + '-' + flight.endNumber );
    }else if  (flight.hasOwnProperty('number')) {
      numbers.push(flight.number);
    }
 }
}
console.log(numbers)

i am getting output as expected in console numbers = [123, "7000-7999"] but issue is getting error in build and compile

TS2339: Property 'endNumber' does not exist on type '{ number: number; } | { grouping: string; }'.
      Property 'endNumber' does not exist on type '{ number: number; }'.
TS2339: Property 'number' does not exist on type '{ number: number; } | { grouping: string; }'.
  Property 'number' does not exist on type '{ grouping: string; }'.

could someone tell me and help me to loop this data. flight.number gives error property number doesnt exist on type '{ number: number; } | { grouping: string; }'

Jota.Toledo · Accepted Answer · 2017-11-22 19:07:04Z

2

Add any[] to the declaration of ArrayVal.

This happens because TypeScript tries to infer the structure of the objects contained in the array, but it does it wrong as the structure is different on both flight arrays.

Check the following playground

UPDATE:

An even cleaner approach would be to define interfaces for your data (this means actually make use of TS):

interface Data {
  comparator: string;
  flight: Flight[];
}

interface Flight {
  'number'?: number;
  grouping?: string;
  endNumber?: number;
}

let data: Data[] = [{
       comparator: 'EQ',
       flight: [{
           'number': 123
          }, {
           grouping: 'Flight Group South America'
          }]
      }, {
       comparator: 'NEQ',
       flight: [{
           'number': 7000,
           endNumber: 7999
          }]
      }];

let numbers: any = [];

for ( let val of data){
 for (let flight of val.flight) {
    if ( flight.hasOwnProperty('number') && flight.hasOwnProperty('endNumber') ) {
      numbers.push(flight.number + '-' + flight.endNumber );
    }else if  (flight.hasOwnProperty('number')) {
      numbers.push(flight.number);
    }
 }

}
console.log(numbers)

edited Nov 22, 2017 at 19:07

answered Nov 22, 2017 at 19:01

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

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

2 Comments

Srinivas Valekar Over a year ago

This is the solution but I would not recommend adding any because typescript is strongly typed. We will be loosing the whole essence of typescript's functionality. This will be a dirty hack to fool the compiler

Srinivas Valekar Over a year ago

Okay now I agree with you

mohsenmadi · Accepted Answer · 2017-11-23 19:17:02Z

-1

Instead of:

for (let flight of val.flight) {
    if ( flight.hasOwnProperty('number') && flight.hasOwnProperty('endNumber') ) {
      numbers.push(flight.number + '-' + flight.endNumber );
    }else if  (flight.hasOwnProperty('number')) {
      numbers.push(flight.number);
    }
 }

You could do:

 for (let flight of val.flight) {
    if ( flight?.number && flight?.endNumber ) {
      numbers.push(flight.number + '-' + flight.endNumber );
    } else if (flight?.number) {
      numbers.push(flight.number);
    }
 }

This is provided that number and endNumber are not 0 just to be sure.

edited Nov 23, 2017 at 19:17

answered Nov 22, 2017 at 19:13

mohsenmadi

2,3972 gold badges27 silver badges37 bronze badges

2 Comments

Jota.Toledo Over a year ago

this wont prevent the warnings

mohsenmadi Over a year ago

To my knowledge and I just tried this, there are no errors or warnings with this "existential operator". If there is a property, the sub-expression evaluates to true; if not, it evaluates to false. The ?. operator "soaks up" null references and it's designed specifically for this type or property accessing.

Collectives™ on Stack Overflow

TypeScript gives warnings on access to object properties

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related