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

IT技术 reactjs typescript
2021-05-22 02:12:06

我正在将现有的 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>to 开始的五行</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/"
    ]
}

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

3个回答

Typescript 不希望在您的 Typescript 文件中看到 JSX。解决这个最简单的方法是从重命名文件.ts.tsx

Typescript 文档中的 JSX

我也遇到了同样的问题。这可能是由于您使用的扩展名 .ts 不允许在其中编写 JSX 代码。您应该使用 .tsx 扩展名,而不是使用 .ts 扩展名

我在没有扩展名的文件中遇到了这个错误。它只是filename没有扩展,所以 VSCode 假设它是 TS。当我将文件重命名为filename.js错误时,错误就消失了。

但是,如果您希望文件在typescript中并且不希望出现错误,那么接受的答案 ( filename.tsx) 是正确的方法。