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

Question

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

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

import React from 'react';

class Test extends React.Component {

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

export default Test;

这导致错误

  

错误TS1192（TS）模块   '“ *** /反应/反应/ ClientApp / node_modules / @ types /反应/索引”'   没有默认导出。

然后，我将文件复制粘贴到相同的位置，并将其命名为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"并获取整个模块，则需要启用esModuleInterop TypeScript编译器选项。如果您有tsconfig.json文件，则只需将"esModuleInterop": true添加到此处的"compilerOptions"块中。如果您没有这样的文件，那么我不知道如何为Visual Studio项目更改TypeScript选项。

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