Redux-persist: [v5] Typescript type definitions

[jbrodriguez]

Will you eventually provide typescript definitions (as you're doing only Flow in v5) ?

[rt2zz]

right, v5 is written in flow, I am hoping someone will be kind enough to contribute TS declarations :)

With v5 the types are extracted into the build dirs 1-1 with each file, so hopefully porting those definitions to TS should not be too painful.

[svachmic]

Hi @rt2zz any news on this matter?

[openscript]

Hi all

I've started to add Typescript definitions in here:
https://github.com/openscript/redux-persist

Feedback is appreciated! /ping @rt2zz

Robin

[rt2zz]

@openscript awesome!

With typescript does it make sense to get these type in early before they are complete, or is it better to wait for comprehensive definitions?

[openscript]

Yes, I'm using v5 with partial type definitions right now.

For a while I also used this type definitions, but you will lose type safety for the interaction with redux-persist:

Add to typings.d.ts:

declare module 'redux-persist';
declare module 'redux-persist/es/integration/react';
declare module 'redux-persist/es/storage';

[codepunkt]

@openscript Awesome! Whats prevents you from opening a PR?

[rt2zz]

agreed lets get this going, in my experience once the ball is rolling further incremental improvements will come quickly!

[rodrigoelp]

Hey guys, joining the conversation. I've been checking the @openscript repo and did a minor fix to the persistCombineReducers(...) exported function as Reducer cannot be expressed without its generic parameter (trying to get a hang on how to create and define the type definition).

Do you guys know what is going on?

[rodrigoelp]

Ok guys, I have created my type definition (which is working on react-native) and created the following pull request #615 at least the scenario I am using. If you have other scenarios to test the port is working I would love to see it.

Couldn't use the type definition created by @openscript as it was not compiling, so basically wrote it from scratch

[rodrigoelp]

Good news people, my pull request has been merged into master. Still waiting for feedback if any of you have anything to request.

Cheers

[deanmoses]

Should I be able to redux-persist 5.4.0 with TypeScript yet?

When I attempt to import like this...
import { persistStore, persistCombineReducers } from 'redux-persist';
... I get the following TypeScript error:

Could not find a declaration file for module 'redux-persist'.

[rodrigoelp]

Hi @deanmoses, I don't think the change has been published in npm yet.

If you want to add the type support right now, follow these steps:

1. Download the type definition file locally to your computer.
2. Create a folder where you have your typescript code called typedefs (or whatever you want to call it) and store the file there.
3. In the tsconfig.json file, add under compilerOptions the following line: "typeRoots": [ "[relative_path_to_folder_containing_code]/typedefs" ]. Add commas as required.

Now your type definitions should work.

Here is an example of my tsconfig.json file in case you needed

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true, 
    "outDir": "./lib/", 
    "strict": true, 
    "typeRoots": [ "./typedefs" ],
  },
  "include": [
    "./src/"
  ]
}

[razagill]

@rodrigoelp Thanks for the type defs. However, I'm having a problem importing the react-native storage like so:

import storage from 'redux-persist/lib/storage';

I am using the type definition file you mentioned above but getting an error Could not find declaration file for module 'redux-persist/lib/storage', looks like there aren't any typings for this. How are you using that in react-native?

[rodrigoelp]

I got no idea if @rt2zz has published that version yet (haven't checked...) so... first, go to your node_modules/redux-persist folder and check the type def is there... If it is there, then I messed something up...

If the file is there, then please reply to this message so I can check this as soon as possible to push a fix and copy the typedef into your project (under a typedef folder) and edit your tsconfig.json file to include the typedef project while I work this out.

Here is an example of this working.
https://github.com/rodrigoelp/reactnative-typescript-exercise-14/tree/49ed00d1d65f3775d78a1f2d97d612259fe47510

Unfortunately, I have not checked this myself as I was waiting for the module to be published (did not know how to test the node module directly, I copied that file into my redux-persist folder and it worked...

[razagill]

@rodrigoelp I don't see any typedef there in the node_modules/redux_persist, also I think they are in the repo here but like you said probably haven't been published yet.

I'm following your repo now to set it up as I got the same error. I guess I need to import AsyncStorage instead of storage.

[rt2zz]

just published the latest v5.5 - including several TS updates 👍

[rodrigoelp]

Hi @razagill, I decided to import AsyncStorage as for that particular exercise I did not want people reading the code to think there some other special storage mechanism. But importing storage from the redux-persist should be the same thing. Good news is @rt2zz published the library already :)

[razagill]

@rt2zz Tried the new version and although I can see the index.d.ts file in src, after installation TS compiler still complains that no type definitions are available (for now I've copied that file to my typedefs folder manually). Also not sure @rodrigoelp but even after importing the file I still can't do the following import

import storage from 'redux-persist/lib/storage';

I have to import AsyncStorage directly from react-native and pass it to persistConfig

[rodrigoelp]

Hi @razagill, I thought the project was going to pick up the type definition as package.json includes the src directory.

I've seen different projects including the type definition as part of the package.json as

{
  "name": "...",
  "version": "...",
   "description": "...",
   "main": "...",
   "types": "./src/index.d.ts"
   ...
}

Could you try that on your local version? If that is the fix, let's create a pull request to fix this issue.

In regards to "redux-persist/lib/storage" module, I can't say that I've tested that part, as I mentioned above, I just included the asyncStorage from react-native.

[openscript]

I've created an issue (#674) and a pull request (#676) for this.

[yordis]

@rt2zz by any updates on the PRs?

[rt2zz]

I just updated with package.json: "types": "./src/index.d.ts" in v5.6.1

further discussion around the types is ongoing in the PR #676 - feedback appreciated

[sanjeevraolade]

If still not working,
Just add below to your module declarations.
create index.d.ts @YourApp/index.d.ts (anywhere but preferably here) and add below line to it
declare module 'redux-persist/*';