如何解决Visual Studio 2019中的“只能使用'esModuleInterop'标志默认导入”？

Question

我正在将我的JavaScript文件升级到Visual Studio 2019中的TypeScript，以更好地管理它们。

当我想从另一个文件导入模块时，看到弯曲的线条抱怨：

  

x只能使用'esModuleInterop'标志默认导入

我应该如何解决？

Answer 1

使用Visual Studio“添加新项”功能添加TypeScript JSX文件（扩展名为.tsx）后，即使在tsconfig中确实有esModuleInterop=true，我仍然遇到此问题。我的其他tsx模块均未出现此错误，我发现如果添加新的文本文件并将其重命名为.tsx，则不会发生该错误。

经过反复摸索，罪魁祸首似乎是由视觉工作室添加到csproj中的这些行

  <ItemGroup>
    <None Remove="ClientApp\src\public\foo.tsx" />
  </ItemGroup>

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

我从csproj中删除了它们，错误消失了

Answer 2

就我而言，此解决方案有帮助：

<块引用>

tsconfig.json 文件的 Build Action 必须设置为 Content。 否则，自 VS 2019 起，Visual Studio 将忽略此文件。

找到它here

Answer 3

一种简单的解决方案是在"esModuleInterop": true文件的compilerOptions中设置tsconfig.json。

示例：

{
  "compilerOptions": {    
    "esModuleInterop": true
  }
}