typescript - Intellisense markerar felaktigt importfel trots att .vs-mappen har raderats


Jag använder Visual Studio 2019 och TypeScript 3.9.

Jag fortsatte arbeta på ett React/.NET-projekt när Intellisense visade några fel vid skapandet av några nya tsx-filer, såsom:

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

Den förstnämnda dyker endast upp i de nya filerna, den sistnämnda i index.d.ts-filen som jag inte har ändrat sedan det fungerade senast.

Jag verifierade:

  • Den korrekta tsconfig-filen är riktad (projektet innehåller bara en).
  • Jag ändrade tsconfig-filens bygginställning från 'None' till 'Contenct'.

Även efter att ha raderat .vs-mappen och startat om VS fungerar det inte.

REDIGERA: "esModuleInterop": true är också verifierat.

REDIGERA: Steg för att reproducera:

  1. Installera VS 2019 och Node.
  2. Skapa ett nytt React/.NET Core-projekt i VS2019.
    • Uppgradera react-skripten till den senaste med npm upgrade react-scripts --latest
  3. Ta bort alla eslint-paket med npm remove eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react¹
  4. Installera eller uppgradera TypeScript
  5. För att installera TypeScript, använd npm install typscript --latest --save-dev
  6. eller om du redan har TypeScript installerat kan du uppgradera med npm upgrade TypeScript --latest
  7. Installera TypeScript-definitionfilerna med npm install @types/node @types/react @types/react-dom @types/react-router
  8. Skapa följande tsconfig-fil:
  "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
  }
}
  1. Skapa en ny .tsx-fil och installera och importera några paket:
    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';

Det kan leda till ett TS2307-fel eller inte.

Svar #1

Jag hade fortfarande problem med detta, men efter att ha sökt på SO efter ett svar insåg jag att tsconfig (åtminstone när den läses i Visual Studio 2019) är skiftlägeskänslig. Så när jag ändrade min konfiguration för att ha

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

mina fel försvann. Andra steg vi tog:

  • uppdatera VS (via menyn Hjälp -> Sök efter uppdateringar)
  • Ladda ner och kör den senaste TypeScript-tillägget för VS (för oss var det 4.1)
  • Starta om VS efter allt ovanstående

Svar #2

Försök att lägga till detta i din nya tsx-fil:

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

Försök också att ändra din tsconfig.json eller tsconfig.app.json, ändra "module": "es6" till "module": "commonjs".