@types/core-js 用于动态导入“core-js/stable”

Question

This is what I do in my index.js to avoid delivering polyfills to all my users.

index.js

const renderApp = () => {
  ReactDOM.render(
    <App
      firebase={firebase}
    />
    ,document.getElementById("root") as HTMLElement
  );
};

/* ############################ */
/* #### CHECK FOR POLYFILL #### */
/* ############################ */

if (
  'fetch' in window &&
  'Intl' in window &&
  'URL' in window &&
  'Map' in window &&
  'forEach' in NodeList.prototype &&
  'startsWith' in String.prototype &&
  'endsWith' in String.prototype &&
  'includes' in String.prototype &&
  'includes' in Array.prototype &&
  'assign' in Object &&
  'entries' in Object &&
  'keys' in Object
) {
  renderApp();
} else {
  import(
    /* webpackChunkName: "core-js-stable" */
    /* webpackMode: "lazy" */
    'core-js/stable'                          // <---- DYNAMIC IMPORTED "core-js/stable"
  ).then(renderApp);
}

But I'm getting the "implicit any type" warning in the dynamic import for the core-js/stable package. And since I usually work witht the --noImplicitAny flag, my project won't compile like that.

The weird thing is that I have installed the @types/core-js package

Why is Typescript not finding the types for the core-js package?

NOTE: If I import it with a regular import "core-js/stable" I do not get this warning/error.

Also, if I dynamic import it only the core-js without the /stable path, I do not get any warning/error.

Like, this is fine:

 import(
    /* webpackChunkName: "core-js-stable" */
    /* webpackMode: "lazy" */
    'core-js'
  ).then(renderApp);

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "jsx": "react",
    "module": "CommonJS",
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "ES5",
    "paths": {
      "@src/*": ["./src/*"],
    }
  },
  "include": [
    "src/**/*"
  ]
}

Answer 1

Here is what I did to get rid of the error/warning.

Got this idea from Typescript docs:

https://www.typescriptlang.org/docs/handbook/namespaces.html#working-with-other-javascript-libraries

I've created this folder for ambient declarations and an index.d.ts file

/types/ambient/index.d.ts

index.d.ts

declare module 'core-js/stable';

And on index.tsx you've got to reference the d.ts file that you've created, using triple slash directive.

index.tsx

/// <reference path="./types/ambient/index.d.ts"/>

(...) OTHER CODE

import(
  /* webpackChunkName: "core-js-stable" */
  /* webpackMode: "lazy" */
    'core-js/stable'
).then(renderApp);

Now everything works without errors / warnings.