TypeScript 错误 2304:找不到名称 'div' - CRA TypeScript 模板
Posted
技术标签:
【中文标题】TypeScript 错误 2304:找不到名称 \'div\' - CRA TypeScript 模板【英文标题】:TypeScript Error 2304: Cannot find name 'div' - CRA TypeScript TemplateTypeScript 错误 2304:找不到名称 'div' - CRA TypeScript 模板 【发布时间】:2021-01-27 21:58:45 【问题描述】:我在 VSCode 中使用开箱即用的 create-react-app my-app --template typescript
项目时遇到问题,无法识别任何元素。我经常收到错误 cannot find name xxx 'xxx' 是我在 JSX 中使用的任何 html 元素。
有趣的是,该项目最初将在零编辑的情况下运行。一旦我真正进入 App.tsx
并更改任何内容或创建一个非常基本的新组件,它就会中断。
这是我尝试按照 TypeScript Handbook Github 中的 this 教程制作的一个非常基本的组件。
// 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
ed 到我的新项目中,创建 Hello.tsx
并且在我将元素放入 return
语句时它说 找不到名称'h1'。 ts(2304).
然后我去了App.tsx
,一打开它,同样的错误也显示出来了。
我在 GitHub 上提交了一个问题,因为我不知道我是如何诚实地得到这个错误的。我已经搜索了几个小时,发现的大多数解决方案与我的特定问题无关。大多数解决方案都忘记将 React 的文件扩展名从 .js
或 .ts
更改为 .tsx
。或者他们必须在package.json
中指定"@types/node": "^12.0.0"
,或在tsconfig.json
中指定target
、lib
、module
或include
,所有这些我都有。
环境信息:
系统:
操作系统: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 位)npmPackages:
反应:^16.13.1 => 16.13.1 反应域:^16.13.1 => 16.13.1 反应脚本:3.4.3 => 3.4.3npmGlobalPackages:
创建反应应用程序:3.4.1代码编辑器:VSCode
【问题讨论】:
你能做一个Github repo,把整个项目(除了node_modules,为了节省空间)都提交给它吗?将其作为文件夹进行调试会容易得多,我们可以在其中看到您的组织,而不是在此处复制粘贴。 【参考方案1】:结束标签< /h1>
中的额外空格-> </h1>
【讨论】:
多余的空间是 Prettier 尝试格式化时出现错误的结果。不幸的是,如果我更正间距并保存,由于 cannot find name xxx 的潜在错误,它会直接回到原来的状态。由于同样的错误,App.tsx
文件在保存后更加糟糕。【参考方案2】:
将 VS Code 打字稿版本设置为工作区中的版本应该可以修复它。
见:https://***.com/a/64976666/6753500
【讨论】:
【参考方案3】:我将文件扩展名从 ts 更改为 tsx,它应该也适合你
【讨论】:
以上是关于TypeScript 错误 2304:找不到名称 'div' - CRA TypeScript 模板的主要内容,如果未能解决你的问题,请参考以下文章
TS-2304 错误 - 在“.ts”文件中导入“jquery”时在 TypeScript 中找不到名称“Iterable”
从命令行读取参数 - 错误 TS2304:找不到名称“进程”