How to apply typescript for firebase functions in React?

Question

I'm in the process of converting one of my React Firebase project to typescript with help of react-redux-firebase documentation. One of the problem I'm having is how to correctly define types for the fireabase and firestore functions. For example, here's my React reducer action function.

import { Dispatch } from "redux";
import { PROJECT_TYPES } from "../../action-types/project";
import { PROJECT_ACTION } from "../../action/project";
import { IPROJECT } from "../../interface/project";


export const createProject = (project: IPROJECT) => async (dispatch:Dispatch<PROJECT_ACTION>, getState:any, { getFirebase, getFirestore }:any):Promise<void> => {

    const firestore = getFirestore();
    firestore.collection('projects').add({
        ...project, 
        authorFirstName: getState().firebase.profile.firstName,
        authorLastName:getState().firebase.profile.lastName,
        authorId:getState().firebase.auth.uid,
        createdAt:new Date()
    }).then(() => {
        dispatch({
            type: PROJECT_TYPES.CREATE_PROJECT,
            payload: project
        })
    }).catch((err:any) => {
      console.log({err})
        dispatch({  type: PROJECT_TYPES.CREATE_PROJECT_ERROR, payload: err })
    })
 }

As see above code I've defined the type as any to the getState, getFirebase and getFirestore functions. I'm not happy with that type, so I want to know is there a correct way to define these types?

Instructions followed from the http://react-redux-firebase.com/docs/api/getFirebase.html link

Thanks in advance.

a google search, returned this: javascript.plainenglish.io/… — Maifee Ul Asad
– Maifee Ul Asad, Commented Jan 3, 2022 at 18:01

Jose German Perez Sanchez · Accepted Answer · 2022-01-04 21:10:31Z

1

The information for the type definitions for React Redux may be found in the @types/react-redux typedefs package on NPM. The types export certain helpers in addition to typing the library methods, making it easy to construct typesafe interfaces between your Redux store and your React components.

Because the react-redux package depends on @types/react-redux, the type definitions will be installed together with the library. Otherwise, you'll have to explicitly install them (using npm install @types/react-redux, for example).

Reading the documentation in the comments, the information could be useful, but I found more documentation that might also help with your project:

answered Jan 4, 2022 at 21:10

Jose German Perez Sanchez

1,2277 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply typescript for firebase functions in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related