TypeScript用接口如何描述数组的问题

Question

interface Squares {

  squares: (null | string)[]

}

interface History {

  [index: number]: Squares

}

interface State {

  history: History

  stepNumber: number

  xIsNext: Boolean

}

class Game extends React.Component {

  state: State

  constructor() {

    super()

    this.state = {

      history: [{

        squares: Array(9).fill(null)

      }],

      stepNumber: 0,

      xIsNext: true

    }

  }

  

  handleClick(i: number) {

    const history = this.state.history.slice(0, this.state.stepNumber + 1)

  }

以上代码为项目代码的一部分，项目使用React+TypeScript开发，上面的代码在vscode中提示错误：Property 'slice' does not exist on type 'History'.。

slice是数组方法，如果换成类似let a: string[] = ['Hello']这种方式则slice方法可以正常使用不会报错。

题主目前是还是TypeScript初学者，想问一下各位:

1. 这种问题产生的原因是什么

2. 类似this.state这种结构的数据应该怎么用interface描述（主要是history这个数组怎么描述）

Answer 1

原因就是接口没有正确继承数组接口，导致数组的slice方法定义丢失改成下面这样interface&nbsp;History&nbsp;extends&nbsp;Array<Squares>{}