React-redux-firebase: Add typings for Typescript

Created on 24 May 2017  ยท  15Comments  ยท  Source: prescottprue/react-redux-firebase

Currently no typings for Typescript are available, are there any plans to add them? I found no information regarding Typescript support.

Right now using Typescript (with noImplicitAny option activated) it's only possible to require the package like so

const reactReduxFirebase = require('react-redux-firebase');
const { firebaseConnect, isLoaded, isEmpty, dataToJS, pathToJS } = reactReduxFirebase;

Because typings are missing the development experience is not as good as it could be in a Typescript environment. This intro shows how to add them and why they are useful.

Additional info:

$ npm info @types/react-redux-firebase
npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node@6/6.10.3/bin/node" "/usr/local/bin/npm" "info" "@types/react-redux-firebase"
npm ERR! node v6.10.3
npm ERR! npm  v4.2.0
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/@types%2freact-redux-firebase
npm ERR! 404
npm ERR! 404  '@types/react-redux-firebase' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/dotcs/.npm/_logs/2017-05-24T11_04_33_311Z-debug.log
enhancement in-pre-release

Most helpful comment

@prescottprue You're right, it's there right now. Awesome! Thanks for your sustained effort. ๐Ÿ‘

/Users/fmueller/Library/Caches/Yarn/v1/npm-react-redux-firebase-1.5.0-beta.3-9e5400a823c19988f85170ea035e9fac7ddd6571/
โ”œโ”€โ”€ CHANGELOG.md
โ”œโ”€โ”€ CNAME
โ”œโ”€โ”€ CODE_OF_CONDUCT.md
โ”œโ”€โ”€ LICENSE.md
โ”œโ”€โ”€ PATRONS.md
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ SUMMARY.md
โ”œโ”€โ”€ book.json
โ”œโ”€โ”€ codecov.yml
โ”œโ”€โ”€ dist
โ”‚ย ย  โ”œโ”€โ”€ react-redux-firebase.js
โ”‚ย ย  โ””โ”€โ”€ react-redux-firebase.min.js
โ”œโ”€โ”€ es
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ index.d.ts
โ”œโ”€โ”€ lib
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ src
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ webpack.config.js
โ””โ”€โ”€ yarn.lock

10 directories, 66 files

All 15 comments

There has currently been no plan to add them (no devs have asked yet).

Now that you have mentioned the need, I will look into adding this to the roadmap. Always open to pull requests if you wanted to start to add the functionality.

v1.5.0-beta was released with initial typescript typings.

It was my first time playing with typescript, so let me know if it works for you.

@dotcs Let me know if you get a chance to try out the typings. Otherwise, going to include this in the upcoming v1.5.0 release.

@prescottprue Sorry for the late answer. And many thanks for addressing the issue. I have tested it with version v.1.5.0-beta, but although the index.d.ts is specified in the package.json, it's missing in the release.

The current tree of the release looks like this:

/Users/dotcs/Library/Caches/Yarn/v1/npm-react-redux-firebase-1.5.0-beta-cca139de1022c1e203ae6078b48a7cbf3c701931/
โ”œโ”€โ”€ CHANGELOG.md
โ”œโ”€โ”€ LICENSE.md
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ dist
โ”‚ย ย  โ”œโ”€โ”€ react-redux-firebase.js
โ”‚ย ย  โ””โ”€โ”€ react-redux-firebase.min.js
โ”œโ”€โ”€ es
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ lib
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ src
    โ”œโ”€โ”€ actions
    โ”‚ย ย  โ”œโ”€โ”€ auth.js
    โ”‚ย ย  โ”œโ”€โ”€ index.js
    โ”‚ย ย  โ”œโ”€โ”€ query.js
    โ”‚ย ย  โ””โ”€โ”€ storage.js
    โ”œโ”€โ”€ compose.js
    โ”œโ”€โ”€ connect.js
    โ”œโ”€โ”€ constants.js
    โ”œโ”€โ”€ helpers.js
    โ”œโ”€โ”€ index.js
    โ”œโ”€โ”€ reducer.js
    โ””โ”€โ”€ utils
        โ”œโ”€โ”€ actions.js
        โ”œโ”€โ”€ auth.js
        โ”œโ”€โ”€ events.js
        โ”œโ”€โ”€ index.js
        โ”œโ”€โ”€ populate.js
        โ”œโ”€โ”€ query.js
        โ””โ”€โ”€ storage.js

10 directories, 57 files

I've manually copied it over from here. After copying the file things work out smoothly, although the definitions contain lots of any statements, which could be improved. But of course this can be done iteratively in the future.

Given the manually copied index.d.ts file, my import statements now look like this

import { firebaseConnect, isLoaded, isEmpty, dataToJS, pathToJS } from 'react-redux-firebase';

which is awesome! ๐Ÿ‘

So from my perspective it's fine to include it in the next release if you make sure that the index.d.ts is distributed along with the package.

Thanks again for addressing the issue so quickly. :)

Great catch! Will make sure that is included in the release.

@dotcs v1.5.0-beta.2 was released with the typescript typings included in the files list. Let me know if you get a chance to try it out.

@prescottprue Thanks for the update. Unfortunately the index.d.ts is still not included. Are you sure that the file is not ignored somehow when building the NPM module?

/Users/dotcs/Library/Caches/Yarn/v1/npm-react-redux-firebase-1.5.0-beta.2-b97616ef610459a3427c0588f7db5da69d87223b/
โ”œโ”€โ”€ CHANGELOG.md
โ”œโ”€โ”€ LICENSE.md
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ dist
โ”‚ย ย  โ”œโ”€โ”€ react-redux-firebase.js
โ”‚ย ย  โ””โ”€โ”€ react-redux-firebase.min.js
โ”œโ”€โ”€ es
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ lib
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ src
    โ”œโ”€โ”€ actions
    โ”‚ย ย  โ”œโ”€โ”€ auth.js
    โ”‚ย ย  โ”œโ”€โ”€ index.js
    โ”‚ย ย  โ”œโ”€โ”€ query.js
    โ”‚ย ย  โ””โ”€โ”€ storage.js
    โ”œโ”€โ”€ compose.js
    โ”œโ”€โ”€ connect.js
    โ”œโ”€โ”€ constants.js
    โ”œโ”€โ”€ helpers.js
    โ”œโ”€โ”€ index.js
    โ”œโ”€โ”€ reducer.js
    โ””โ”€โ”€ utils
        โ”œโ”€โ”€ actions.js
        โ”œโ”€โ”€ auth.js
        โ”œโ”€โ”€ events.js
        โ”œโ”€โ”€ index.js
        โ”œโ”€โ”€ populate.js
        โ”œโ”€โ”€ query.js
        โ””โ”€โ”€ storage.js

10 directories, 57 files

@dotcs You are right! v1.5.0-beta.3 was released with settings that should fix this.

It ended up being solved by removing the npmFilesMap and files fields from the package file. I had a chance to test it out with the published version, and it seems to be working.

Mind trying it again and letting me know?

@prescottprue You're right, it's there right now. Awesome! Thanks for your sustained effort. ๐Ÿ‘

/Users/fmueller/Library/Caches/Yarn/v1/npm-react-redux-firebase-1.5.0-beta.3-9e5400a823c19988f85170ea035e9fac7ddd6571/
โ”œโ”€โ”€ CHANGELOG.md
โ”œโ”€โ”€ CNAME
โ”œโ”€โ”€ CODE_OF_CONDUCT.md
โ”œโ”€โ”€ LICENSE.md
โ”œโ”€โ”€ PATRONS.md
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ SUMMARY.md
โ”œโ”€โ”€ book.json
โ”œโ”€โ”€ codecov.yml
โ”œโ”€โ”€ dist
โ”‚ย ย  โ”œโ”€โ”€ react-redux-firebase.js
โ”‚ย ย  โ””โ”€โ”€ react-redux-firebase.min.js
โ”œโ”€โ”€ es
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ index.d.ts
โ”œโ”€โ”€ lib
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ src
โ”‚ย ย  โ”œโ”€โ”€ actions
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ auth.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ query.js
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ storage.js
โ”‚ย ย  โ”œโ”€โ”€ compose.js
โ”‚ย ย  โ”œโ”€โ”€ connect.js
โ”‚ย ย  โ”œโ”€โ”€ constants.js
โ”‚ย ย  โ”œโ”€โ”€ helpers.js
โ”‚ย ย  โ”œโ”€โ”€ index.js
โ”‚ย ย  โ”œโ”€โ”€ reducer.js
โ”‚ย ย  โ””โ”€โ”€ utils
โ”‚ย ย      โ”œโ”€โ”€ actions.js
โ”‚ย ย      โ”œโ”€โ”€ auth.js
โ”‚ย ย      โ”œโ”€โ”€ events.js
โ”‚ย ย      โ”œโ”€โ”€ index.js
โ”‚ย ย      โ”œโ”€โ”€ populate.js
โ”‚ย ย      โ”œโ”€โ”€ query.js
โ”‚ย ย      โ””โ”€โ”€ storage.js
โ”œโ”€โ”€ webpack.config.js
โ””โ”€โ”€ yarn.lock

10 directories, 66 files

Looks like the npmFileMap change did not make it ? (in version 2 I mean)

@pvdyck The npmFileMap is no longer being used as part of this change (which is included in v2.0.0).

I also confirmed that the typescript typings are released with the v2.0.0 versions (and they appear to be). Are you not able to use them?

Argument of type 'typeof firebase' is not assignable to parameter of type 'ConfigObject'.

I'm getting this when I try to pass the firebase configured object directly instead of the config object like so...

import * as firebase from 'firebase'
const config = {etc...}
firebase.initializeApp(config)
const storeWithFirebase = compose(
    reactReduxFirebase(
        firebase,  // [ts] Argument of type 'typeof firebase' is not assignable to parameter of type 'ConfigObject'.
        etc...

Is there any chance of adding this?

@maxyharr Is that in v2.0.0 that you are running?

It may be that the typescript typings need a small update for v2.0.0.

@prescottprue yeah that's 2.0.0. I think you're right. I think it just needs a small tweak.

v2.0.0 Beta 3 was released with some updates to the typings for v2 syntax.

@maxyharr If it does not work as expected for v2 after this pre-release, could you open another issue?

Was this page helpful?
0 / 5 - 0 ratings