Как правильно установить тип PROPS?

Question

Я работаю с REDUX в REACT и работаю над тем, чтобы функциональность mapStateToProps работала правильно.

Вот мой компонент:

interface NavProps{
    loggedIn: boolean,
    loggingIn: boolean
}

class Navigator extends Component {

public render(){
    const { loggedIn } = this.props as NavProps;
    return (
        ...removed irrelevant code
      );
    }
}

const mapStateToProps = (state: RootReducer): NavProps => {
    const { authentication } = state;
    const { loggedIn, loggingIn } = authentication;
    return{
        loggedIn,
        loggingIn
    };
}

export default connect(mapStateToProps, null)(Navigator);

Здесь вы можете видеть, что я использовал:

const { loggedIn } = this.props as NavProps;

Если нет, я получаю ошибку, что 'loggedIn' отсутствует в this.props.

В уроках, на которые я смотрел, все они использовали что-то вроде этого без проблем:

const { loggedIn } = this.props

Я делаю это правильно или я пропускаю шаг, который заставит реквизит правильно отражать то, что назначено во время mapStateToProps?

Обновление: я вернулся и просмотрел несколько руководств по REDUX. Теперь я вижу, что они использовали JSX, а не TSX, поэтому, возможно, мне действительно нужно использовать утверждение типа, чтобы успокоить Typescript.

Обновление:

Несколько человек предложили:

class Navigator extends Component <NavProps>

Однако, это приводит к этой ошибке:

Type '{}' is missing the following properties from type 'Pick<NavProps, "loggedIn" | "loggingIn">': loggedIn, loggingIn  TS2739

<Router>
22 |       <div className="App">
> 23 |         <Navigator />

Не уверен, что это имеет какое-то значение, но вот компонент, который встраивает NAVIGATOR:

const App = () => (
  <Provider store={store}>
    <Router>
      <div className="App">
        <Navigator />
            <Switch>
              <Route exact path="/libraries" component={Libraries} />
            </Switch>
      </div>
    </Router>
  </Provider>
);

export default App;

Хорошо, я нашел здесь предложение:

TS2740 Типу не хватает следующих свойств из ошибки ReadOnly в React Native с приложением TypeScript

Как ни странно, как это видно из комментариев ниже, ответ это сделать так:

class Navigator extends Component<any, any> 

Даже если кажется неправильным просто вставлять туда "что-нибудь".

Вот один, который немного понятнее:

TS2739 - Отсутствует тип в следующих свойствах

Предлагает сделать опоры необязательными:

interface NavProps{
    loggedIn?: boolean,
    loggingIn?: boolean
}

class Navigator extends Component<NavProps>

Answer 1

Мы можем видеть, что в документы TypeScript здесь :

class Navigator extends Component<NavProps> {

Вот как это выглядит на моей машине:

Answer 2

Согласно моим комментариям выше, я протестировал это, и у меня вообще нет проблем

interface NavProps {
  loggedIn: boolean
  loggingIn: boolean
}

class Navigator extends Component <NavProps> {
  public render() {
    const { loggedIn } = this.props
    console.log(loggedIn)
    return null
  }
}

const mapStateToProps = (state: RootReducer): NavProps => {
  const { authentication } = state
  const { loggedIn, loggingIn } = authentication
  return {
    loggedIn,
    loggingIn,
  }
}

export default connect(mapStateToProps, null)(Navigator)

, за исключением того, что у меня нет типа RootReducer из вашего вопроса

---

обновление: попробуйте написать connect как это тоже

export default connect<NavProps>(mapStateToProps, null)(Navigator)