发布Ionic应用时遇‘property json does not exist on type object’编译错误求助

这个问题的核心在于你使用的是Angular的HttpClient（从@angular/common/http导入），它和旧版的Http模块行为完全不同——HttpClient会自动将API响应解析为JSON对象，不需要再手动调用.json()方法。而开发模式（ionic serve）下TypeScript的严格检查通常没完全开启，所以这类类型错误被隐藏了，但发布编译时（比如ionic build --prod）严格模式触发，就会爆出这个错误。

下面是具体的修复步骤：

1. 彻底清理旧的Http相关代码 #

你已经注释掉了.map(res => res.json())这类代码，现在可以完全删除这些冗余内容：

• 删除Weather.ts和Home.ts中导入的Response（来自@angular/http）
• 删除所有rxjs/add/operator/map或rxjs/Rx的导入语句，因为HttpClient不需要这些操作符

2. 为HTTP请求指定返回类型 #

TypeScript在严格模式下需要明确的类型定义，我们可以给getWeather方法指定返回类型，避免类型推断错误：

方式一：快速修复（用any类型） #

修改WeatherProvider中的getWeather方法：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs'; // 记得导入Observable

@Injectable()
export class WeatherProvider {
  apiKey = '6d3243fb22b01d0c';
  url;

  constructor(public http: HttpClient) {
    console.log('Hello WeatherProvider Provider');
    this.url = 'http://api.wunderground.com/api/'+this.apiKey+'/conditions/q';
  }

  getWeather(city: string, state: string): Observable<any> {
    return this.http.get<any>(`${this.url}/${state}/${city}.json`);
  }
}

方式二：更规范的类型定义（推荐） #

为API返回的结构创建接口，让TypeScript完全了解数据结构：

// 在Weather.ts中添加接口定义
interface WeatherApiResponse {
  current_observation: {
    // 根据Wunderground API的返回字段填写，比如：
    temp_c: number;
    weather: string;
    icon_url: string;
    // 其他你需要用到的字段
  };
}

// 然后修改getWeather方法
getWeather(city: string, state: string): Observable<WeatherApiResponse> {
  return this.http.get<WeatherApiResponse>(`${this.url}/${state}/${city}.json`);
}

对应的，在Home.ts中也可以更新weather的类型：

// 如果用了上面的接口，导入它（需要调整路径）
import { WeatherApiResponse } from '../../providers/weather/weather';

export class HomePage {
  weather: WeatherApiResponse['current_observation'];
  location: { city:string, state:string } = { city: 'Chennai', state: 'TN' }; // 这里可以直接初始化，避免undefined

  // ... 其他代码不变
}

3. 检查TypeScript配置（可选） #

如果还是有问题，可以打开项目根目录的tsconfig.json，检查strict选项：

• 如果strict: true，可以尝试暂时设置为false来验证是否是严格模式导致的，但长期来看还是建议保持严格模式并完善类型定义
• 或者单独调整noImplicitAny: false，允许隐式的any类型（不推荐，但可以快速验证）

完成这些步骤后，再尝试发布编译，应该就能解决这个错误了。

内容的提问来源于stack exchange，提问作者Perinban Parameshwaran