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重命名为.tsx。

JSX in Typescript Documentation

Answer 2

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

打字稿-React组件中的“找不到名称”错误

2 个答案: