How to add redux-persist to typescript project?

Question

I'm trying to add redux-persist to my React project (using typescript). But I have some trouble. Compiling falls with following error:

Could not find a declaration file for module 'redux-persist/lib/storage'. '.../WebstormProjects/catalog/node_modules/redux-persist/lib/storage/index.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist/lib/storage'

I installed the following packages: "@types/redux-persist": "^4.3.1" and "redux-persist": "^6.0.0".

Content of redux-persist/lib/storage:

declare module "redux-persist/es/storage" {
  import { WebStorage } from "redux-persist/es/types";

  const localStorage: WebStorage;
  export default localStorage;
}

declare module "redux-persist/lib/storage" {
  export * from "redux-persist/es/storage";
  export { default } from "redux-persist/es/storage";
}

What to do to solve this problem?

Answer 1

Solution:

Add this line:

/// <reference types="redux-persist" />

to react-app-env.d.ts if your using create-react-app.

Explanatation:

Triple-slash directives in typescript are single-line comments containing a single XML tag. The contents of the comment are used as compiler directives.

These directives are utilised to declare a dependency on a package, which could be type, lib, path, etc..

The process of resolving these package names is similar to the process of resolving module names in an import statement. An easy way to think of triple-slash-reference-types directives are as an import for declaration packages.

For instance, in the code above, including /// <reference types="redux-persist" /> in a declaration file declares that this file uses names declared in @types/node/redux-persist.d.ts; and thus, this package needs to be included in the compilation along with the declaration file.

Read more here.