TypeScript 错误 2304：找不到名称“div” - CRA TypeScript 模板

Question

我在使用开箱即用create-react-app my-app --template typescript项目无法识别任何元素的VSCode 中遇到问题。我不断收到错误无法找到名称 xxx，其中 'xxx' 是我在 JSX 中使用的任何 HTML 元素。

有趣的是，该项目最初将在零编辑的情况下运行。一旦我真正进入App.tsx并更改任何内容或创建一个非常基本的新组件，它就会中断。

这是我尝试按照来自 TypeScript 手册 Github 的本教程制作的一个非常基本的组件。

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

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

该项目再次直接从推荐的 TypeScript 模板创建，使用create-react-app my-app --template 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的反应。或者，他们必须指定"@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
• 纱线：1.22.4 - /usr/local/bin/yarn
• npm: 6.14.7 - /usr/local/bin/npm

浏览器：

• Firefox 开发者版 82.0b7（64 位）

npm 包：

• 反应：^16.13.1 => 16.13.1
• 反应域：^16.13.1 => 16.13.1
• 反应脚本：3.4.3 => 3.4.3

npmGlobalPackages：

• 创建反应应用程序：3.4.1

代码编辑器：VSCode

Answer 1

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

Answer 2

我已将文件重命名为 .tsx，但问题仍然存在。这是我导出组件的方式。我尝试了这个并且成功了。

我的组件是

export default InsertDocuments = () =>

我把它改为

const InsertDocuments = () =>
//etc
export default InsertDocuments

或者

export const InsertDocuments = () =>

Answer 3

关闭标签中的额外空格< /h1>-></h1>