Typescript - React组件中的"找不到名称"错误

Question

我正在将现有的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/"
    ]
}

我非常困惑,非常感谢一些帮助!

Answer 1

Typescript不希望在你的Typescript文件中看到JSX.解决此问题的最简单方法是将文件重命名为.ts.

Answer 2

我也遇到过同样的问题。这可能是由于您用作.ts文件的扩展名不允许其中包含 JSX 代码。相反，您应该使用.tsx扩展。

Answer 3

如果您有“.tsx”文件但仍然出现错误，则应在 tsconfig.json 中从“preserve” --> “react-jsx”添加/修改“jsx ”的值，如下所示。

现在，您必须再次停止并重新启动服务器。

{
  "compilerOptions": {
    "jsx": "react-jsx", // change here
    ...
    ...

}

Answer 4

如果创建 .tsx 文件后未将它们包含在 tsconfig 文件中，也可能会出现此问题：

"include": [
  "wwwroot/js/**/*.ts",
  "wwwroot/js/**/*.tsx" // <-- this needed to be added in my case
],