CODEWITHSUNDEEP
typescriptreact-nativereact-native-firebase
Luis Averhoff
Luis Averhoff

Reputation: 977

How do I solve this property declaration error that typescript keeps complaining to me?

I have a piece of code in my componentDidMount lifecycle function that does the following

this.unsubscriber = auth().onAuthStateChanged((user: RNFirebase.User) => {
   this.setState({ user });
});

onAuthStateChanged returns an unsubscriber function that needs to be called when the component unmounts. The problem is that if I declare the unsubscriber variable like so

constructor(props: {}) {
    super(props);
    this.unsubscriber: Function = null
}

typescript complains by saying that the property "unsubscriber" does not exist(also that I cannot assign to function because it is a constant or read only property). I tried doing other stuff like passing it as a state like so.

type AppState = {
  user: RNFirebase.User | null;
  unsubscriber: Function | null;
}

class App extends Component<{}, AppState> {
   ....
}

but that didn't do me any good; got the same error when I try to assign the return value from onAuthStateChanged. this.unsubscriber = null would work just fine if I was just doing react without typescript but I'm trying to use both.

The closest I got was this

type AppState = {
  user: RNFirebase.User | null;
};

class App extends Component<{}, AppState> {
  private unsubscriber: Function;
  ....
}

But the error I got for this one is that it not initialized there or in the constructor and I can't assign null to it. So what can I do?

Here is the entire code that I'm working with.

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { auth, RNFirebase } from 'react-native-firebase';
import { Login } from './screens';

type AppState = {
  user: RNFirebase.User | null;
};

class App extends Component<{}, AppState> {
  private unsubscriber: Function; // This has to be initialized.

  constructor(props: {}) {
    super(props);
    this.state = { user: null };
  }

  componentDidMount() {
    this.unsubscriber = auth().onAuthStateChanged((user: RNFirebase.User) => {
      this.setState({ user });
    });
  }

  componentWillUnmount() {
    if (this.unsubscriber) {
      this.unsubscriber();
    }
  }

  render() {
    const { user } = this.state;

    if (!user) {
      return <Login />;
    }

    return (
      <View>
        <Text>Welcome to my awesome app {user.email}!</Text>
      </View>
    );
  }
}

export default App;

Upvotes: 0

Views: 192

Answers (2)

blitzcom
blitzcom

Reputation: 150

You just need to initialize unsubscriber property:

private unsubscriber: (() => void) | null = null;

Upvotes: 0

shkaper
shkaper

Reputation: 4998

I'd suggest you to keep your unsubscriber declaration as a class member but make it optional (optional class properties). Also, Function type is generally not useful at all (just take a look at what is the interface that it defines) and you're better off defining its type as () => void if its return value is going to be ignored (see callback types). So, try something like this:

private unsubscriber?: () => void;

Upvotes: 1

Related Questions