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

【问题标题】：Module resolve error if tsx file is included in the project item group如果项目项组中包含 tsx 文件，则模块解析错误
【发布时间】：2018-10-19 21:34:27
【问题描述】：

我使用 react 模板创建了一个全新的 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

【问题讨论】：

标签： typescript asp.net-core-2.1 react-tsx

【解决方案1】：

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

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

【讨论】：