javascript - Masalah bagaimana untuk menerangkan tatasusunan menggunakan antara muka dalam 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)
  }

Kod di atas adalah sebahagian daripada kod projek Projek ini dibangunkan menggunakan React+TypeScript Kod di atas menggesa ralat dalam vscode. Property 'slice' does not exist on type 'History'.

slice ialah kaedah tatasusunan Jika anda menukarnya kepada sesuatu seperti

, kaedah slice boleh digunakan seperti biasa tanpa melaporkan ralat. let a: string[] = ['Hello']

Penyoal kini seorang pemula TypeScript, dan saya ingin bertanya kepada anda:

1. Apakah punca masalah ini

2. Bagaimanakah data dengan struktur yang serupa dengan keadaan ini diterangkan menggunakan antara muka (terutamanya bagaimana untuk menerangkan tatasusunan sejarah)

Answer 1

1. Alasannya ialah antara muka tidak mewarisi antara muka tatasusunan dengan betul, mengakibatkan kehilangan definisi kaedah hirisan tatasusunan

2. Tukar kepada yang berikut

interface History extends Array<Squares>{}