reactjs - كيف يمكنني التخلص من رسالة التحذير "@types/react/index" يمكن استيرادها بالافتراضي فقط باستخدام علم 'esModuleInterp' في React/TypeScript

الأمر بسيط كما ذُكر أعلاه: 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"
  },

الإجابة رقم 1

ما نجح معي هو إضافة ما يلي في ملف tsconfig.json الخاص بي ضمن compilerOptions:

"allowSyntheticDefaultImports": true,
"esModuleInterop": true

الإجابة رقم 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