javascript – Das Problem, wie Arrays mithilfe von Schnittstellen in TypeScript beschrieben werden

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)
  }

Der obige Code ist Teil des Projektcodes. Das Projekt wird mit React+TypeScript entwickelt. Der obige Code führt zu einem Fehler in vscode: Property 'slice' does not exist on type 'History'..

slice ist eine Array-Methode. Wenn Sie sie in etwas wie let a: string[] = ['Hello'] ändern, kann die Slice-Methode normal verwendet werden, ohne dass ein Fehler gemeldet wird.

Der Fragesteller ist derzeit ein TypeScript-Anfänger und ich möchte Sie fragen:

1. Was ist die Ursache für dieses Problem

2. Wie sollten Daten mit einer ähnlichen Struktur wie this.state mithilfe einer Schnittstelle beschrieben werden (hauptsächlich wie das Verlaufsarray beschrieben wird)

Answer 1

1. 原因就是接口没有正确继承数组接口，导致数组的slice方法定义丢失

2. 改成下面这样

interface History extends Array<Squares>{}