VS2017创建的React-Redux项目在VS Code中出现编译错误

这个问题我之前也碰到过，核心原因是VS 2017内置的TypeScript版本、类型定义和VS Code默认使用的版本/定义存在差异，导致模板里的类型断言在VS Code更严格的类型检查下失效。咱们一步步来解决：

1. 理解错误根源 #

报错信息明确说typeof FetchData无法赋值给StatelessComponent，这是因为：

• VS 2017的模板里可能把类组件（React.Component子类）错误地用了无状态组件（StatelessComponent，现在官方推荐叫FunctionComponent）的类型断言
• 类组件的类型签名是构造函数，而无状态组件是函数，两者的类型体系完全不兼容

2. 修正类型断言 #

找到(FetchData) as typeof FetchData;这一行，根据FetchData的真实类型调整断言：

• 如果FetchData是类组件（从模板特性来看大概率是），应该断言为React.ComponentClass<WeatherForecastsState>，或者直接保留typeof FetchData（它本身就是类的构造函数类型）：

  // 替换原来的错误断言
  const connectedComponent = connect(mapStateToProps)(FetchData as React.ComponentClass<WeatherForecastsState>);
  

  更省心的方式是直接去掉断言——connect本身具备类型推导能力，只要你的mapStateToProps类型正确，它能自动匹配组件类型：

  const connectedComponent = connect(mapStateToProps)(FetchData);
  

• 如果FetchData是函数组件，则改用React.FunctionComponent<WeatherForecastsState>（替代已被废弃的StatelessComponent）：

  const connectedComponent = connect(mapStateToProps)(FetchData as React.FunctionComponent<WeatherForecastsState>);
  

3. 统一TypeScript版本 #

VS 2017默认使用内置的TypeScript版本（比如2.x或3.x系列），而VS Code可能会调用全局安装的更高版本。为了避免版本差异导致的检查规则不一致：

• 在项目根目录的tsconfig.json中，指定和VS 2017一致的compilerOptions.target和lib配置
• 安装项目本地的TypeScript版本，和VS 2017内置版本匹配：

  npm install typescript@<VS2017对应的版本号> --save-dev
  

  然后在VS Code中按Ctrl+Shift+P，选择"TypeScript: Select TypeScript Version"，切换为"Use Workspace Version"

4. 更新类型定义包 #

旧版本的@types/react或@types/react-redux可能存在类型兼容问题，更新到最新稳定版：

npm install @types/react @types/react-redux --save-dev

5. 检查组件的类型标注 #

确保FetchData组件的props和state类型定义准确：

interface WeatherForecastsState {
  forecasts: WeatherForecast[];
  isLoading: boolean;
}

class FetchData extends React.Component<{}, WeatherForecastsState> {
  // 组件逻辑...
}

按照以上步骤调整后，VS Code的类型检查应该就能和VS 2017保持一致，报错也会消失。

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