尽管删除了 .vs-Folder，Intellisense 仍错误地标记导入错误答案

【问题标题】：Intellisence falsely marks import errors despite deleting .vs-Folder尽管删除了 .vs-Folder，Intellisense 仍错误地标记导入错误
【发布时间】：2020-10-27 09:25:57
【问题描述】：

我正在使用 Visual Studio 2019 和 TypeScript 3.9。

在创建一些新的 tsx 文件时，我继续处理 React/.NET 项目时，Intellisence 显示了一些错误，例如：

TS1259: [...] can only be default-imported using the 'esModuleInterop' flag
TS2307: can not find module [...]

前者只出现在新文件中，后者出现在index.d.ts 文件中，该文件自上次工作以来没有修改过。

我已验证：

目标是正确的 tsconfig 文件（项目只包含一个）。
我将 tsconfig 文件的构建设置从“无”设置为“内容”。

即使删除 .vs 文件夹并重新启动 VS 也无法正常工作。

编辑："esModuleInterop": true 也经过验证。

编辑：重现步骤：

安装 VS 2019 和 Node。
在 VS2019 中新建一个 React/.NET Core 项目。
- 使用 npm upgrade react-scripts --latest 将反应脚本升级到最新版本
使用 npm remove eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react 删除所有 eslint 软件包¹
安装或升级 TypeScript
要安装 TypeScript，请使用 npm install typscript --latest --save-dev
或者如果您已经安装了 TypeScript，您可以使用 npm upgrade TypeScript --latest 进行升级
使用 npm install @types/node @types/react @types/react-dom @types/react-router 安装 TypeScript 定义文件
创建以下 tsconfig 文件：

  "include": [
    "src/*"
  ],
  "compilerOptions": {
    "target": "es5",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

创建一个新的 .tsx 文件并安装和导入一些包：

    import React, { Component } from 'react';
    import * as microsoftTeams from "@microsoft/teams-js";
    import { Button } from "@fluentui/react-northstar";
    import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

它可能会也可能不会导致 TS2307 错误。

【问题讨论】：

您是否在新的 tsx 文件中写入了零件的任何导入节点？

标签： typescript visual-studio-2019 intellisense

【解决方案1】：

我对此仍有疑问，但在搜索 SO 以找到答案后，我意识到 tsconfig（至少在 Visual Studio 2019 中读取时）是区分大小写的。所以当我改变我的配置有

...
"esModuleInterop": true,
"module": "ESNext",
"moduleResolution": "Node"
...

我的错误消失了。我们采取的其他步骤：

更新 VS（通过菜单帮助 -> 检查更新）
下载并运行最新的 VS 打字稿扩展 (for us it was 4.1)
完成上述所有操作后重新启动 VS

【讨论】：

我检查并更新了，IntelliSence 实际上只是在我使用大写字母时自动完成。不幸的是，这并没有为我解决问题。

【解决方案2】：

请尝试将其添加到您的新 tsx 文件中：

import _ = require('xxx'); // xxx is the name of [...]

另外，尝试修改你的tsconfig.json或tsconfig.app.json，将"module": "es6"改为"module": "commonjs"。

【讨论】：

这会引发TS1202: Import assignment cannot be used when targeting ECMAScript 6 or higher 错误。
重启机器后似乎之前的错误消失了，但是在导入模块到进一步创建的文件时再次出现。
尝试修改您的tsconfig.json 或tsconfig.app.json，将"module": "es6" 更改为"module": "commonjs"。然后，删除 bin 和 obj 文件夹，重新启动项目。
或者如果你仍然遇到同样的错误，我认为你可以尝试使用import xxx(the same name) from 'xxx'(the same name)并将tsconfig.json设置target设置为ES5或ES3。
回到 Es5/es3 会不会出现兼容性问题？

【解决方案3】：

我最近在创建两个新的 tsx 文件时发现了 IntelliSense，它在一个文件中标记了错误，但在另一个文件中没有标记。

因此，我尝试了一个完整的重构并将 React 及其类型更新到 17.0 版：

  "dependencies": {
    "@types/react-router-dom": "^5.1.6",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.1",
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "typescript": "^3.7.5"
  },

参考问题之后就消失了。我认为这是由 React 类型的版本与 react 本身不同引起的。我省略了默认导入并保留了import * as React from 'react';-syntax。默认导入有时可能不起作用，但您可以避免 IntelliSense 无法识别状态和道具，这是主要问题。

【讨论】：