reactjs - Cách đúng để thiết lập kiểu PROPS là gì?

Tôi đang làm việc với REDUX trong REACT và đang cố gắng để chức năng mapStateToProps hoạt động đúng cách.

Đây là thành phần của tôi:

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

Ở đây bạn có thể thấy tôi đã sử dụng:

const { loggedIn } = this.props as NavProps;

Nếu không, tôi nhận được lỗi rằng 'loggedIn' không có trong this.props.

Trong các hướng dẫn mà tôi đã xem, tất cả họ đều sử dụng điều gì đó như thế này mà không gặp vấn đề gì:

const { loggedIn } = this.props

Tôi đang làm đúng cách hay tôi đang bỏ lỡ một bước khiến các props không phản ánh đúng những gì được gán trong mapStateToProps?

Cập nhật: Tôi đã quay lại xem lại một vài hướng dẫn về REDUX. Bây giờ tôi nhận ra họ đang sử dụng JSX, không phải TSX, nên có lẽ tôi CÓ PHẢI sử dụng ép kiểu để làm hài lòng Typescript.

Cập nhật :

Một vài người đã gợi ý:

class Navigator extends Component <NavProps>

Tuy nhiên, điều đó gây ra lỗi này:

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

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

Không chắc điều này có tạo ra sự khác biệt nào không, nhưng đây là thành phần đang nhúng 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;

Ok, tôi đã tìm thấy một gợi ý ở đây:

Lỗi TS2740: Kiểu thiếu các thuộc tính sau từ ReadOnly trong ứng dụng React Native với TypeScript

Dường như lạ lùng khi nhìn từ các bình luận phía dưới, câu trả lời là làm như sau:

class Navigator extends Component<any, any> 

Mặc dù dường như không đúng khi chỉ đơn giản chèn từ 'any' vào đó.

Đây là một cái rõ ràng hơn một chút:

TS2739 - Thiếu kiểu trong các thuộc tính sau

Nó gợi ý làm các props trở nên tùy chọn:

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

class Navigator extends Component<NavProps>

Câu trả lời #1

Chúng ta có thể thấy điều đó trong tài liệu TypeScript tại đây:

class Navigator extends Component<NavProps> {

Đây là cách nó trông trên máy của tôi:

Câu trả lời #2

Theo những nhận xét của tôi ở trên, tôi đã thử nghiệm điều này và không có vấn đề gì cả

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)

ngoại trừ việc tôi không có kiểu RootReducer từ câu hỏi của bạn

cập nhật: thử viết connect như thế này, cũng vậy

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