VS2019中React.Component的state与setState在TypeScript中无法识别求助

我之前在VS2019里用MSBuild编译React TypeScript项目时也碰到过一模一样的问题——明明继承了React.Component，但state和setState就是被标红说不存在，改ECMA目标版本根本没用。结合你的场景，给你几个实际有效的排查方向：

• 先检查tsconfig.json的核心配置
  老版本的TypeScript对React的JSX支持需要明确配置，你得确保tsconfig.json里有这几个关键项：

  {
    "compilerOptions": {
      "target": "es5", // 或者你需要的版本
      "jsx": "react",  // 这个是关键！没有它TypeScript认不出React组件的类型
      "lib": ["dom", "es2015"], // 要包含dom库才能识别浏览器/React相关的类型
      "strict": true,
      "esModuleInterop": true // 帮助TypeScript正确处理React的模块化导入
    }
  }
  

  尤其是"jsx": "react"，如果没设，TypeScript只会把JSX当普通语法处理，不会关联到React的Component类型，自然认不出state。

• 显式声明React.Component的泛型参数
  TypeScript 3.3.3版本对泛型的推断能力不如新版本，哪怕你不需要Props，也最好显式声明Props和State的类型：

  import React from 'react';
  
  // 先定义你的State类型（哪怕是空对象也要定义）
  interface GetUserState {
    // 比如你需要的状态属性：username?: string;
  }
  
  // 显式指定Props和State泛型，Props用空对象{}就行
  export class GetUser extends React.Component<{}, GetUserState> {
    constructor(props: {}) {
      super(props);
      this.state = {
        // 这里初始化你的状态
      };
    }
  }
  

  不指定泛型的话，老版本TypeScript会把Component当成无类型的基类，自然识别不了state和setState。

• 确保React类型定义存在
  因为你没用到Node.js/npm，没法通过npm install @types/react装类型，那你可以手动下载对应版本的React类型定义文件（比如@types/react@16.x，和TS3.3.3兼容），放到项目里的typings/react文件夹下，然后在tsconfig.json里添加：

  "compilerOptions": {
    "typeRoots": ["./typings"]
  }
  

  这样TypeScript就能找到React的类型定义了。

• 升级Microsoft.Typescript.MsBuild版本
  3.3.3版本实在太老了，TypeScript在后续版本里对React类型的支持做了很多修复。你可以尝试升级到4.5.x左右的版本（这个版本和VS2019兼容性较好），NuGet里直接搜Microsoft.Typescript.MsBuild选合适的版本就行。

• 同步VS编辑器的TypeScript版本
  有时候VS自带的TypeScript语言服务版本和NuGet包的版本不一致，也会导致编辑器报错。你可以去「工具->选项->文本编辑器->JavaScript/TypeScript->Language Service」里，把TypeScript版本设置为「Use NuGet package version」，让编辑器和编译用同一个版本的TypeScript。

按这个顺序排查，应该能解决state和setState未识别的问题。

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