Question

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

当我访问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

Answer 1

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

如果您通过类型断言告诉TypeScript更了解，您会发现never[]问题消失了……只要在某处某处填充了该数组，您就可以正确使用这么说。

state = {
    orders: []
} as OrdersState;

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

1 个答案: