时间戳

首页 > 解决方案 > 如何创建一个包含由另一个接口定义的对象数组的接口？

reactjs - 如何创建一个包含由另一个接口定义的对象数组的接口？

问题描述

在类组件中，我试图通过定义一个包含由另一个接口定义的对象数组的接口来正确键入状态对象。

当我访问 state 属性时，它的类型为never[]?

interface OrdersProps extends RouteComponentProps<any>, React.Props<any> { }

interface OrderType {
  ingredients: { [index: string]: number },
  totalPrice : number
}

type OrdersType = OrderType[]

interface OrdersState {
  // orders: { ingredients: {[index: string]: number}, totalPrice: number}[] <- not working
  // orders: Array<OrderType> // <- not working 
  orders: OrdersType // <- not working
}

class Orders extends React.Component<OrdersProps, OrdersState> {
  state = {
    orders: []
  }
  render() {
    const orders = this.state.orders // <- orders of type `never[]` ??

    return (
      <div>
        ...
      </div>
    )
  }
  componentDidMount() {
    // fetch data and set state
  }
}
export default Orders

标签： reactjstypescript

解决方案

这是 TypeScript 看到state使用包含空订单数组的对象初始化的结果，该数组已never填充。（在非严格模式下，我相信它会导致any[]而不是never[].

如果你告诉 TypeScript 你更了解类型断言，你会发现never[]问题消失了……所以只要某处某处填充了该数组，你就可以正确地告诉它。

state = {
    orders: []
} as OrdersState;

推荐阅读