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

【问题标题】：Typescript - "Cannot find name" errors in React componentsTypescript - React 组件中的“找不到名称”错误
【发布时间】：2018-12-11 23:23:36
【问题描述】：

我正在将现有的 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”
未终止的正则表达式文字
运算符“

这是我的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/"
    ]
}

我非常困惑，非常感谢一些帮助！

【问题讨论】：

你添加了 React/React DOM 的类型吗？另外，也许它应该命名为 .tsx。
此代码是否在 . tsx 或 . ts 文件中？要使用jsx，扩展名必须是tsx

标签： reactjs typescript

【解决方案1】：

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

JSX in Typescript Documentation

【讨论】：

感谢您的回答。这对我有用。我以前所有的 JSX 文件都使用 .js 扩展名，所以我只是想把它改成 .ts 就可以了。尽管这对我有用，但我很好奇您是否知道解决此问题的另一种方法，尤其是因为将所有内容更改为 .tsx 需要重命名我的所有模块导入。
当文件被错误命名为.ts 而不是.tsx 时也会发生这种情况
@Lunster 这正是问题所在。
@coreyward 不，不完全是，但类似的是。最初的问题是关于 jsx 和 tsx，而我在谷歌上发现这个页面有同样的错误，但原因是 ts 而不是 tsx 文件。除非重新表述得更笼统，否则您的回答将无法解决我的问题。
@Lunster 原始问题：“我遇到了很多问题……当我将 .js 文件制作成 .ts 文件时。”。

【解决方案2】：

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

【讨论】：

@Nelles，这是一个合法有用的答案。不知道你为什么花时间批评一个有用的贡献。

【解决方案3】：

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

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

【讨论】：