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

Question

我正在使用 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也得到验证。

编辑：重现步骤：

1. 安装 VS 2019 和 Node.js
2. 在 VS2019 中创建一个新的 React/.NET Core 项目。
3. • 使用 npm upgrade react-scripts --latest 将 react 脚本升级到最新版本
4. 使用 npm 删除所有 eslint 包 remove eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react¹
5. 安装或升级 TypeScript
6. 要安装 TypeScript，请使用 npm install typscript --latest --save-dev
7. 或者，如果您已经安装了 TypeScript，则可以使用 npm upgrade TypeScript --latest 进行升级
8. 使用 npm install @types/node @types/react @types/react-dom @types/react-router 安装 TypeScript 定义文件
9. 创建以下 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
  }
}

10. 创建一个新的 .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 错误。

Answer 1

我仍然遇到这个问题，但是在搜索 SO 之后我意识到 tsconfig（至少在 Visual Studio 2019 中读取时）是区分大小写的。 所以当我改变我的配置有

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

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

• 更新 VS（通过菜单帮助 -> 检查更新）
• 下载并运行最新的 VS 打字稿扩展（ 对我们来说是 4.1 ）
• 完成上述所有操作后重新启动VS

Answer 2

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

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

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

Answer 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'; -句法。 默认导入有时可能不起作用，但您可以避免 IntelliSense 无法识别主要问题的状态和道具。