我正在将现有的React代码迁移到TypeScript,遇到了很多问题,其中之一是当我创建.js
文件.ts
文件时出现了很多"找不到名称"错误。
下面是所讨论的代码:
import React from 'react';
const Footer = ({ children, inModal }) => (
<footer className={'tableBottomPanel' + (inModal ? " in-modal" : "") }>
<div>
{children}
</div>
</footer>
);
export default Footer;
从<footer>
到</footer>
的五行带有红色下划线,并根据我将鼠标悬停的位置给出各种错误,例如:
- 找不到名称"页脚"。
- 应为"〉"
- 找不到名称"div"
- 未终止的正则表达式文本
- 运算符"〈"不能应用于类型"boolean"和"RegExp"
下面是我的tsconfig.json
文件:
{
"compilerOptions": {
"outDir": "./dist/", // path to output directory
"sourceMap": true, // allow sourcemap support
"strictNullChecks": true, // enable strict null checks as a best practice
"module": "es6", // specify module code generation
"jsx": "react", // use typescript to transpile jsx to js
"target": "es5", // specify ECMAScript target version
"allowJs": true, // allow a partial TypeScript and JavaScript codebase
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"lib": [
"es6",
"dom"
],
"types": [
"node"
]
},
"include": [
"./src/"
]
}
我是令人难以置信的困惑,并将非常感谢一些帮助!
4条答案
按热度按时间xienkqul1#
Typescript不希望在Typescript文件中看到JSX。解决此问题的最简单方法是将文件从
.ts
重命名为.tsx
。JSX in Typescript Documentation
vlf7wbxs2#
我也遇到过同样的问题。这可能是由于您使用的
.ts
文件的扩展名不允许在它的JSX代码。相反,您应该使用.tsx
扩展名。thtygnil3#
我在一个没有扩展名的文件中遇到了这个错误。它只是没有扩展名的
filename
,所以VSCode假设它是TS。当我将文件重命名为filename.js
时,错误消失了。不过,如果您希望文件是在 typescript ,并不希望错误,接受的答案(
filename.tsx
)是正确的方法.z4iuyo4d4#
为了防止其他人遇到这种情况。我使用StencilJS,它使用react类的tsx文件,但没有react。我的问题是我在vscode中加载了SRC目录。纠正措施是加载SRC目录的父目录,该目录具有适当的config.ts、tsconfig.json等。这使它能够正确识别tsx文件。