reactjs - typescript 错误 2304 : Cannot find name 'div' - CRA TypeScript Template

Question

我在使用开箱即用的 VSCode 时遇到问题 create-react-app my-app --template typescript项目无法识别任何元素。我不断收到错误 找不到姓名xxx 'xxx' 是我在 JSX 中使用的任何 HTML 元素。
有趣的是，该项目最初将在零编辑的情况下运行。一旦我真正进入 App.tsx并更改任何内容或创建一个非常基本的新组件，它会中断。
这是我尝试制作的一个非常基本的组件 this来自 TypeScript 手册 Github 的教程。

// src/components/Hello.tsx
import React from 'react';

export const Hello = () => {
  return <h1>Hello < /h1>;
};

再次使用 create-react-app my-app --template typescript 从推荐的 TypeScript 模板直接创建该项目。 .未编辑任何文件。
它自带 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": "react"
  },
  "include": [
    "src"
  ]
}

他们当然有自己的 package.json以及。

{
  "name": "ts-trial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.52",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "typescript": "4.0.3"
  },
  "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"
    ]
  }
}

再次没有文件被编辑 - 我运行了命令， cd编入我的新项目，创建 Hello.tsx一旦我在 return 中放入一个元素声明它说 找不到名称“h1”。 ts(2304) .
然后我去了 App.tsx一旦我打开它，同样的错误也出现了。
我在 GitHub 上提交了一个问题，因为我不明白我如何才能诚实地得到这个错误。我已经搜索了几个小时，我找到的大多数解决方案都与我的特定问题无关。大多数解决方案都忘记从 .js 更改文件扩展名或 .ts至 .tsx对于 react 。或者他们必须指定 "@types/node": "^12.0.0"在 package.json , 或 target , lib , module或 include在 tsconfig.json ，这些我都有。
环境信息:
系统 :

操作系统:macOS 10.15.6

CPU:(4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz

二进制文件 :

节点:14.6.0 -/usr/local/bin/node

yarn :1.22.4 -/usr/local/bin/yarn

npm: 6.14.7 -/usr/local/bin/npm

浏览器 :

Firefox 开发者版 82.0b7(64 位)

npm 软件包 :

react :^16.13.1 => 16.13.1

react 域:^16.13.1 => 16.13.1

react 脚本:3.4.3 => 3.4.3

npmGlobalPackages :

创建 react 应用程序:3.4.1

代码编辑器 :VSCode

Answer 1

我将文件扩展名从 ts 更改为 tsx，它也适用于您