Visual Studio 2019 React Typescript 将 CRA v4 应用程序作为 SPA 添加到 WEB 项目时出现太多错误

Question

我是这样陷入困境的。

从模板创建了一个 React-Redux ASP NET CORE 5 项目。

这个版本已经完全过时了，我不想清理到基本版本，所以我所做的是，删除整个 ClientApp 文件夹，并使用 CRA 和 [=14= 创建了一个新的 React 应用程序]

现在这生成了一个工作的 React 应用程序，它可以从 npm start 开始正常运行。然而，当我在 Visual studio 中打开项目时，我被这么多错误轰炸了。

我已经尝试了几乎所有可能的解决方案，我在 tsconfig.json 中设置了 skipLibCheck : true ，下面

{
    "compilerOptions": {
        "target": "ESNext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,

        "jsx": "react-jsx"
    },
    "include": ["src"],
    "exclude": ["node_modules", "typings"]
}

我还在我的项目中添加了 Typescript 4.1.2 Nuget 包。这没有帮助，Visual Studio 说 Using Typescript 4.1 for Intellisense 但我仍然收到所有这些智能感知错误。

这是我的 package.json，由 CRA 生成（我添加了一些 eslint 插件，仅此而已）

{
  "name": "clientapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@types/jest": "^26.0.20",
    "@types/node": "^14.14.21",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.1.3",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

好的，我设法深入研究并解决了这个问题，

使用 typescript React SPA 只是让我的 .net 应用程序执行运行 npm 命令，仅此而已。
Typescript NuGet 包用于 Visual studio 中的智能感知。
Typescript NuGet 包根本不读取 tsconfig.json 文件。它从具有自己的设置部分的项目配置中获取值。
即使你的 React 应用程序从命令行构建良好，因为 VS 2019 使用 typescript nuget pkg 进行智能感知（它根本不用于构建，npm 脚本是运行用于构建和开发）所以你需要将一般 tsconfig.json 与来自 https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html
所以我的配置是这样的。

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
        <TypeScriptTarget>ES5</TypeScriptTarget>
        <TypeScriptJSXEmit>React</TypeScriptJSXEmit>
        <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
        <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
        <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
        <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
        <TypeScriptESModuleInterop>True</TypeScriptESModuleInterop>
        <TypeScriptOutFile />
        <TypeScriptAllowSyntheticDefaultImports>True</TypeScriptAllowSyntheticDefaultImports>
        <TypeScriptOutDir />
        <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
        <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
        <TypeScriptSourceMap>True</TypeScriptSourceMap>
        <TypeScriptMapRoot />
        <TypeScriptSourceRoot />
    </PropertyGroup>

另外你添加typescript Nuget Package后，它会自动在项目中再次包含node_modules，所以你必须再次手动排除它或添加

    <ItemGroup>
        <Compile Remove="ClientApp\.vscode\**" />
        <EmbeddedResource Remove="ClientApp\.vscode\**" />
        <TypeScriptCompile Remove="ClientApp\.vscode\**" />
        <TypeScriptCompile Remove="ClientApp\node_modules\**" />
    </ItemGroup>

基本上你必须像上面那样排除 node_modules，将 tsconfig.json 匹配到你 csproj 文件中的配置，你将不会再看到智能感知错误。

Visual Studio 2019 React Typescript 将 CRA v4 应用程序作为 SPA 添加到 WEB 项目时出现太多错误

Visual Studio 2019 React Typescript Too many errors when adding CRA v4 app as SPA to a WEB project

single-page-application

typescript

reactjs

asp.net-core

visual-studio-2019