Redux TypeScript 无法将状态映射到道具

Question

我在 JavaScript 中遵循 redux 教程，但是当我使用 TypeScript 编写时，我无法将状态映射到道具。

App.tsx：

import * as React from 'react';
import Todo from '../models/Todo';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import Main from './Main';

export interface State {
  todoList: Todo[];
  filterStatus: string;
  isAdding: boolean;
}

const defaultState: State = {
  todoList: [],
  filterStatus: 'SHOW_ALL',
  isAdding: false,
};

const reducer = (state: State = defaultState, action: {}) => {
  return state;
};

const store = createStore(reducer);

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    );
  }
}

export default App;

Main.tsx：

import * as React from 'react';
import { connect } from 'react-redux';
import { State } from './App';

class Main extends React.Component {
  render() {
    return (
      <div style={{ backgroundColor: 'red' }}>{this.props.filterStatus}</div>
    );
  }
}

function mapStateToProps(state: State) {
  return {
    filterStatus: state.filterStatus,
  };
}

export default connect(mapStateToProps)(Main);

上面写着：

[ts] 属性“filterStatus”不存在于类型“Readonly & 只读'。

Answer 1

您需要为组件指定 props 的类型。

export interface MainProps {
  filterStatus: string;
}

class Main extends React.Component<MainProps>