如何摆脱我的“@types/react/index”只能使用 React/TypeScript 中的“esModuleInterp”标志棉绒默认导入

Question

就像上面说的一样简单：React 16.9.22 和 TypeScript 3.8.2。它不会影响任何事情，只是挤满了我的警告窗口表单实际上有用的东西。

在我的 tsconfig 我有：

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

但是每个文件都有一行 import React from 'react';

我收到掉毛错误：

.../node_modules/@types/react/index"' 只能使用 'esModuleInterop' 标志默认导入

可能相关的部门：

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.22.0",
    "@typescript-eslint/parser": "^2.22.0",
    "cross-env": "^5.2.0",
    "eslint": "^6.6.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-plugin-flowtype": "^2.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.18.3",
    "typescript": "^3.8.2"
  },

Answer 1

对我有用的是在编译器选项的 tsconfig.json 文件中添加以下内容：

"allowSyntheticDefaultImports": true,
"esModuleInterop": true

Answer 2

import * as React from "react";
import * as ReactDOM from "react-dom";

这是导入 React 的最具前瞻性的方式。如果您在您的中设置--allowSyntheticDefaultImports（或添加"allowSyntheticDefaultImports": true），tsconfig.json您可以使用更熟悉的导入：

import React from "react";
import ReactDOM from "react-dom";

来源： https: //github.com/typescript-cheatsheets/react