reactjs - 找不到模块 'react' .ts(2307)

Question

我正在尝试使用 TypeScript 创建一个 react 应用程序。我做了 yarn create react-app (name) --use-pnp --typescript。

TS linter 一直说找不到模块'react'.ts(2307)
我尝试过 yarn add @types/react、yarn add、重启 VScode 等。

import React, { Component } from 'react';
import './App.css';

interface IAppState {
}

interface IAppProps {
}

class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppState) {
  super(props);
  this.state = {
  };
  }


  render() {
    return (
      <div className='App'>
        <h1>Image classification with ML5.js</h1>
      </div>
    );
  }
}

export default App;

我的 package.json

{
  "name": "image-recognition",
  "version": "0.1.0",
  "private": true,
  "installConfig": {
    "pnp": true
  },
  "dependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.2",
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "typescript": "3.4.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我的 tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

我尝试过 yarn add @types/react、yarn add、重启 VScode 等。

Answer 1

解决方案:我不得不手动更改应该使用的 TS 版本编辑器 (VSC)。以下说明(2021 年 1 月工作)。
在我的情况下，错误是由 Visual Studio Code 使用全局/默认 TypeScript 版本而不是工作区/项目版本引起的。这很重要，因为 linter/editor 没有选择 tsconfig.json它定义了应该如何解析模块。
这是 VSC 中的 linter 错误:

这里的答案缺少 react 模块，但在我的情况下，它是我的本地模块——仍然，错误代码是相同的，这个解决方案在某些情况下可能会有所帮助。
要更改 Visual Studio Code 中的 TS 版本，您可以单击编辑器窗口底部的版本(屏幕截图中的 4.1.2):

选择选项“选择 TypeScript 版本...”:

然后选择“使用工作区版本”:

这样做之后，错误就消失了。
我的 tsconfig.json以供引用:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": ".",
    "strictNullChecks": true,
    "noImplicitThis": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}