Here is my code -

const winnningCombos = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
];

export interface GameState {
  board: Array<'X' | 'O' | ''>;
  winner: 'X' | 'O' | 'TIE' | undefined;
  nextPlayer: 'X' | 'O' | undefined;
  errorMessage?: string;
}

export class TicTacToe {
  private board: Array<'X' | 'O' | ''> = ['', '', '', '', '', '', '', '', ''];
  player1 = 'X';
  player2 = 'O';
  nextPlayer: 'X' | 'O' = this.player1 as 'X';

  // Moving action
  move(space: number): GameState {
    console.log(space)
    if (this.board[space] !== '') {
      return {
        board: this.board,
        winner: this.getWinner(),
        nextPlayer: this.nextPlayer,
        errorMessage: `space already taken.`
      };
    }

    if (!this.getWinner()) {
      this.board[space] = this.nextPlayer;
    }

    const winner = this.getWinner();

    const nextPlayer = this.nextPlayer === 'X' ? 'O' : 'X';
    this.nextPlayer = winner === undefined ? nextPlayer : undefined;

The error is here - this.nextPlayer = winner === undefined ? nextPlayer : undefined;

    return {
      board: this.board,
      winner,
      nextPlayer: this.nextPlayer,
      errorMessage: undefined
    };
  }

  // Get game current state
  getGameState(): GameState {
    return {
      board: this.board,
      winner: this.getWinner(),
      nextPlayer: this.nextPlayer,
      errorMessage: undefined
    };
  }

  // Reset game action
  reset(): GameState {
    this.board = ['', '', '', '', '', '', '', '', ''];
    this.nextPlayer = 'X';
    return {
      board: this.board,
      winner: undefined,
      nextPlayer: this.nextPlayer,
      errorMessage: undefined
    };
  }

  // Get winner
  getWinner(): 'X' | 'O' | 'TIE' | undefined {
    const winningPlayer = winnningCombos.map((combo) => {
        if (combo.filter((space) => this.board[space] === 'X').length == 3) {
          return 'X';
        }

        if (combo.filter((space) => this.board[space] === 'O').length === 3) {
          return 'O';
        }

        return undefined;
      })
      .find((winner) => winner !== undefined);

    if (winningPlayer) {
      return winningPlayer;
    }

    const isTie = this.board.filter((space) => space !== '').length === 9;
    if (isTie) {
      return 'TIE';
    }

    return undefined;
  }
}

I'm tring to make tic tac toe, and i can not understand this error.

Here is the error -

Type '"X" | "O" | undefined' is not assignable to type '"X" | "O"'.
  Type 'undefined' is not assignable to type '"X" | "O"'.ts(2322)

........................................................................................................................................................................................................................................................................................................................................

CodePudding user response：

The error is trying to tell you that the nextPlayer variable has type "X" | "O" and you're trying to set it to undefined which isn't a valid value.

The problem is on the line where you define the type of nextPlayer:

nextPlayer: 'X' | 'O' = this.player1 as 'X';

You could try updating the type of nextPlayer to include undefined:

nextPlayer: 'X' | 'O' | undefined = this.player1 as 'X';