Angular, property does not exist on type

Question

I have a small weather app. All works fine in browser, but I'm getting errors from TS compiler: property name, main, wind does not exist on type Weather[]. But seems like I added these properties in class Weather[]...

export class AppComponent implements OnInit { 
 weather:Weather[];
 temp:string;
 pressure:number;
 humidity:number;
 wind_speed:number;
 wind_dec:number;
 city:string;
 activeId:string = "Misto Kyyiv"; 
 constructor(private getWeatherService:GetWeatherService) {}
 ngOnInit() { 
 this.getWeatherService.getWeather("Misto Kyyiv").subscribe(weather => {
 this.weather = weather;
 this.temp = (weather.main.temp -273.15).toFixed(2);
 this.pressure = weather.main.pressure;
 this.humidity = weather.main.humidity;
 this.wind_speed = weather.wind.speed;
 this.wind_dec = weather.wind.deg;
 this.city = weather.name;
 console.log(this.weather);
 console.log(this.temp);
 });
 }

export class Weather {
 main:any = {};
 wind:any = {};
 temp:number;
 pressure:number;
 humidity:number;
 wind_speed:number;
 wind_dec:number;
 city:string;
 activeId:string; 
 name:string; 
}

 //Get Weather 
 //it worked when I changed here Weather[] to Weather !!!
 getWeather(city:string):Observable<Weather> {
 let key = "c2dcf8ffb5cdc3f8977bfd2ae7ea4738"; 
 let url = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&?units=metric&APPID=" + key;
 return this.http.get<Weather>(url);
 }

• JB Nizet: The type Weather[] is not the type Weather. It's the type of an array of Weather objects. An array has a length. But it doesn't have a name or a wind.
• Yurii: okey... and how can I fix this?
• JB Nizet: I don't know, because the code doesn't make much sense to me, and I can't deduce what it should do by just looking at the code. Is getWeather("Misto Kyyiv") supposed to provide one Weather object, or an array of 0 to N Weather objects? If it's supposed to provide just one, then its signature, and probably its code, should be fixed. If it's supposed to provide an array, then what are you supposed to do with the elements of this array?
• Nirav: change declaration weather:Weather[] to weather:Weather. Also when you subscribe, you can implicitly tell response type obs.subscribe((weather: Weather) => { // do something})
• Nirav: @JBNizet has right concern. Please provide what service returns.

Answer 1

I changed Weather[] to Weather, and TS compiler stopped yelling!

• Anand Sonawane: Aren't you the savior!.

Answer 2

Try defining data:any in subscribe

ngOnInit() { 
 this.getWeatherService.getWeather("Misto Kyyiv").subscribe((data: any)=> {
 this.weather = data;
 this.temp = (data.main.temp -273.15).toFixed(2);
 this.pressure = data.main.pressure;
 this.humidity = data.main.humidity;
 this.wind_speed = data.wind.speed;
 this.wind_dec = data.wind.deg;
 this.city = data.name;
 console.log(this.weather);
 console.log(this.temp);
 });
 }

Answer 3

I had the same problem and just that was the solution. Before:

async getProfessional(){
 await this._ps.getProfessional(idProfessional).subscribe( data => {
 this.professionalSkills = data[0].aptitudes;
 this.technicalSkills = data[0].technologies;
 });
 }

After:

async getProfessional(){
 await this._ps.getProfessional(idProfessional).subscribe( (data:any) => {
 this.professionalSkills = data[0].aptitudes;
 this.technicalSkills = data[0].technologies;
 });
 }