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









up vote
0
down vote

favorite












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 = null;
unsubscriber: Function

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 = 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 = 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;









share|improve this question



























    up vote
    0
    down vote

    favorite












    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 = null;
    unsubscriber: Function

    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 = 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 = 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;









    share|improve this question

























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      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 = null;
      unsubscriber: Function

      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 = 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 = 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;









      share|improve this question















      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 = null;
      unsubscriber: Function

      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 = 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 = 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;






      typescript react-native react-native-firebase






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 11 at 3:56

























      asked Nov 11 at 3:44









      Luis Averhoff

      7419




      7419






















          2 Answers
          2






          active

          oldest

          votes

















          up vote
          1
          down vote



          accepted










          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;





          share|improve this answer



























            up vote
            0
            down vote













            You just need to initialize unsubscriber property:



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





            share|improve this answer




















              Your Answer






              StackExchange.ifUsing("editor", function ()
              StackExchange.using("externalEditor", function ()
              StackExchange.using("snippets", function ()
              StackExchange.snippets.init();
              );
              );
              , "code-snippets");

              StackExchange.ready(function()
              var channelOptions =
              tags: "".split(" "),
              id: "1"
              ;
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function()
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled)
              StackExchange.using("snippets", function()
              createEditor();
              );

              else
              createEditor();

              );

              function createEditor()
              StackExchange.prepareEditor(
              heartbeatType: 'answer',
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader:
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              ,
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              );



              );













               

              draft saved


              draft discarded


















              StackExchange.ready(
              function ()
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245658%2fhow-do-i-solve-this-property-declaration-error-that-typescript-keeps-complaining%23new-answer', 'question_page');

              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes








              up vote
              1
              down vote



              accepted










              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;





              share|improve this answer
























                up vote
                1
                down vote



                accepted










                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;





                share|improve this answer






















                  up vote
                  1
                  down vote



                  accepted







                  up vote
                  1
                  down vote



                  accepted






                  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;





                  share|improve this answer












                  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;






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 11 at 4:29









                  shkaper

                  765313




                  765313






















                      up vote
                      0
                      down vote













                      You just need to initialize unsubscriber property:



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





                      share|improve this answer
























                        up vote
                        0
                        down vote













                        You just need to initialize unsubscriber property:



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





                        share|improve this answer






















                          up vote
                          0
                          down vote










                          up vote
                          0
                          down vote









                          You just need to initialize unsubscriber property:



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





                          share|improve this answer












                          You just need to initialize unsubscriber property:



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






                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 11 at 4:39









                          Diego López

                          11




                          11



























                               

                              draft saved


                              draft discarded















































                               


                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function ()
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245658%2fhow-do-i-solve-this-property-declaration-error-that-typescript-keeps-complaining%23new-answer', 'question_page');

                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Top Tejano songwriter Luis Silva dead of heart attack at 64

                              政党

                              天津地下鉄3号線