javascript - Le problème de la description des tableaux à l'aide d'interfaces dans 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)
  }

Le code ci-dessus fait partie du code du projet. Le projet est développé en utilisant React+TypeScript. Le code ci-dessus provoque une erreur dans vscode : Property 'slice' does not exist on type 'History'..

slice est une méthode matricielle. Si vous la remplacez par quelque chose comme let a: string[] = ['Hello'], la méthode slice peut être utilisée normalement sans signaler d'erreur.

Le questionneur est encore débutant en TypeScript. Je voudrais vous demander :

1. Quelle est la cause de ce problème

2. Comment les données avec une structure similaire à this.state doivent-elles être décrites à l'aide d'une interface (principalement comment décrire le tableau historique)

Answer 1

1. La raison est que l'interface n'hérite pas correctement de l'interface du tableau, ce qui entraîne la perte de la définition de la méthode slice du tableau

2. Modifier comme suit

interface History extends Array<Squares>{}