React TypeScript中无法设置state接口并向其他组件传递props怎么办

• 你当前的错误核心是没有给接口返回的天气数据定义明确的类型结构，你把weatherData的类型声明为宽泛的Object类型，TypeScript不知道这个对象上存在name属性，因此抛出类型错误，这也是你没有遵循TS最佳实践的核心点。
• 另外你自定义的ApiResponse类型是多余的，axios本身已经内置了泛型支持，可以直接给返回数据指定类型。

第一步：定义天气数据的接口结构 #

你可以对照OpenWeatherAPI的返回字段，定义你需要用到的字段即可，不需要把所有返回字段都写全：

// 按需定义你用到的字段即可，示例如下
interface WeatherData {
  name?: string; // 你当前用到的城市名字段
  // 后续其他组件要用到的字段可以继续加，比如：
  main?: {
    temp: number;
    feels_like: number;
  };
  sys?: {
    sunrise: number;
    sunset: number;
  };
  weather?: Array<{
    main: string;
    description: string;
  }>
}

第二步：替换原有错误的类型声明 #

1. 删掉你自定义的ApiResponse接口
2. 修改AppState的类型定义：

interface AppState {
  weatherData: WeatherData; // 换成你刚才定义的具体接口
}

3. 调用axios的时候用内置泛型指定返回数据类型：

const response = await axios.get<WeatherData>(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=#######&units=metric`);
this.setState({ weatherData:  response.data });

第三步：添加渲染防护 #

因为初始状态weatherData是空对象，读取name的时候可能是undefined，你可以加可选链避免运行时报错：

<CityAndDate city={weatherData?.name}  />

• 永远不要用Object/object/any来声明你需要操作属性的对象类型，除非你完全不需要做任何属性访问，这种宽泛的类型会完全失去TS的类型校验能力。
• 所有外部输入的数据（包括接口返回、用户输入、本地存储读取的内容）都要明确定义类型结构，不要依赖隐式推断。
• 给库的调用传入正确的泛型参数，大部分主流库（比如axios、React相关生态库）都内置了完善的泛型支持，可以直接使用。

• TypeScript官方手册中文版：覆盖所有基础和进阶语法，是最权威的入门资料
• React + TypeScript官方教程：专门讲解React项目中TS的写法规范
• TypeScript类型体操小练习：适合巩固基础类型语法，快速提升类型书写能力

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