typescript - 如果项目项组中包含 tsx 文件，则模块解析错误

Question

我用反应模板创建了一个新的 asp.net 核心项目，并为它配置了 Typescript。

然后我制作了一个非常简单的文件Test.tsx，使用以下代码调用

import React from 'react';

class Test extends React.Component {

    render() {
        return (
            <div/>
        );
    }
}

export default Test;

这导致了错误

错误 TS1192 (TS) 模块 '"***/React/React/ClientApp/node_modules/@types/react/index"' 没有默认导出。

然后我将文件复制粘贴到相同的位置并命名它Test2.tsx。错误只是神奇地消失了。

我做了一些更多的挖掘，发现如果我使用右键单击添加文件 -> 添加新项目 -> TypeScript JSX 文件，那么它将在.csproj文件中添加一个条目

  <ItemGroup>
    <TypeScriptCompile Include="ClientApp\src\Test.tsx" />
  </ItemGroup>

删除这一行将使编译错误消失。但是为什么会这样？？每次我想添加一个新的 TSX 文件时，我是否必须去删除这一行？

使用 Visual Studio 2017 和 TypeScript 3.1.3

Answer 1

由于react模块没有默认导出（至少根据 中的声明@types/react），如果您想要import React from "react"并获取整个模块，则需要启用esModuleInteropTypeScript 编译器选项。如果你有一个tsconfig.json文件，那么你可以添加"esModuleInterop": true到那里的"compilerOptions"块中。如果您没有这样的文件，那么我不知道如何更改您的 Visual Studio 项目的 TypeScript 选项。

我怀疑TypeScriptCompile从文件中删除该行.csproj不是一个好的解决方案。它使错误消失的事实表明它可能会阻止您的.tsx文件被检查是否有错误（或者至少阻止它根据您的主要 TypeScript 选项进行检查），这可能会导致问题在未来。