Reactjs 无法使用Typescript验证道具类型

我有点不确定如何在组件中添加用于类型检查的道具。以下是我迄今为止的组成部分：

import * as React from 'react';
import { connect } from 'react-redux';

export namespace CalculatorDisplay {
  export interface Props {
    display: object,
    calculatorDisplay: string,
  }

  export interface State {

  }
}

// TODO: How do we get displayString to be properly recognized in props validation?
export default class CalculatorDisplay extends React.Component<CalculatorDisplay.Props, CalculatorDisplay.State> {

  render() {

    let calculatorDisplay = this.props.display.displayString;
    return (
      <div className="display">
        <div className="displayText">
          { calculatorDisplay }
        </div>
      </div>
    )
  }

}

import*as React from'React'；
从'react redux'导入{connect}；
导出命名空间计算器展开{
导出接口道具{
显示：对象，
calculatorDisplay:string，
}
导出接口状态{
}
}
//TODO:如何在道具验证中正确识别displayString？
导出默认类CalculatorDisplay扩展React.Component{
render（）{
让calculatorDisplay=this.props.display.displayString；
返回(
{calculatorDisplay}
)
}
}

我在这里得到的错误是：

ERROR in [at-loader] ./src/components/CalculatorDisplay.tsx:23:48 
    TS2339: Property 'displayString' does not exist on type 'object'.

ERROR in [at-loader] ./src/containers/App.tsx:22:24 
    TS2322: Type '{ display: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<CalculatorDisplay> & Readonly<{ children?: ReactNo...'.
  Type '{ display: any; }' is not assignable to type 'Readonly<Props>'.
    Property 'calculatorDisplay' is missing in type '{ display: any; }'.

[at loader]中出现错误。/src/components/CalculatorDisplay.tsx:23:48 TS2339:类型“object”上不存在属性“displayString”。 [at loader]中出错。/src/containers/App.tsx:22:24

---

TS2322:类型“{display:any；}”不可分配给类型“intrinsitattributes&IntrinsicClassAttributes&Readonly”您需要将

props

接口的

display

属性设置为其应有的外观。查看redux应用商店中的

numberpad

对象，了解

display

应该是什么样子。鉴于您的组件，我认为应该是这样。注意：我已经删除了名称空间，因为在这个组件中不需要它

export interface Props {
    display: {
        displayString: string,
        // Other properties of display go here.

    };
    calculatorDisplay: string;
}

export interface State {}

export default class CalculatorDisplay extends React.Component<Props, State> {
    render() {

        const calculatorDisplay = this.props.display.displayString;
        return (
            <div className="display">
              <div className="displayText"> { calculatorDisplay }</div>
            </div>
    )
    }

}

导出接口道具{
显示：{
displayString:string，
//显示的其他属性位于此处。
};
计算器显示：字符串；
}
导出接口状态{}
导出默认类CalculatorDisplay扩展React.Component{
render（）{
const calculatorDisplay=this.props.display.displayString；
返回(
{calculatorDisplay}
)
}
}

在

App.tsx

中如何使用

CalculatorDisplay

？我已经在描述中添加了App.tsx。啊，这很有意义，因为某些原因，我没有建立连接，我想完全按照属性在我的reducer中的声明来塑造属性。谢谢。它们不需要与初始状态下的形状相同，这取决于您在

mapStateToProps

中从您的状态映射的内容。例如，您可以从您的状态映射

displayString

属性，例如

displayString:state.numberpad.displayString

，那么您的道具界面将使用displayString:string，而不是display。在大多数情况下，您只想映射组件所需的内容。

export interface Props {
    display: {
        displayString: string,
        // Other properties of display go here.

    };
    calculatorDisplay: string;
}

export interface State {}

export default class CalculatorDisplay extends React.Component<Props, State> {
    render() {

        const calculatorDisplay = this.props.display.displayString;
        return (
            <div className="display">
              <div className="displayText"> { calculatorDisplay }</div>
            </div>
    )
    }

}