Как я могу решить эту ошибку объявления свойства, что машинопись продолжает жаловаться мне?

Question

В моей функции жизненного цикла componentDidMount есть фрагмент кода, который выполняет следующие действия:

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

onAuthStateChanged возвращает функцию отказа от подписки, которую необходимо вызывать при размонтировании компонента. Проблема в том, что если я объявлю переменную unsubscriber как * 1005

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

typcript жалуется, говоря, что свойство «отписаться» не существует (а также то, что я не могу присвоить функции, потому что она является константой или доступна только для чтения). Я пытался сделать что-то другое, например, передать его как состояние.

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

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

но это не принесло мне никакой пользы; Я получил ту же ошибку при попытке присвоить возвращаемое значение из onAuthStateChanged. this.unsubscriber = null будет работать нормально, если я просто буду реагировать без машинописи, но я пытаюсь использовать оба.

Самый близкий, который я получил, был

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

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

Но ошибка, которую я получил для этого, состоит в том, что он не инициализирован ни там, ни в конструкторе, и я не могу присвоить ему значение null. Так что я могу сделать?

Вот весь код, с которым я работаю.

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;

Answer 1

Вам просто нужно инициализировать unsubscriber свойство:

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

Answer 2

Я бы посоветовал вам оставить объявление unsubscriber в качестве члена класса, но сделать его необязательным ( необязательные свойства класса ). Кроме того, тип Function, как правило, вообще бесполезен (просто посмотрите, что это за интерфейс, который он определяет), и вам лучше определить его тип как () => void, если его возвращаемое значение будет игнорироваться (см. типы обратного вызова ). Итак, попробуйте что-то вроде этого:

private unsubscriber?: () => void;