如何为Pinia的state对象属性设置正确的TypeScript类型

问题根因 #

TypeScript 会自动根据state的初始值推断字段类型，你给previousPieceSelected初始值设为undefined时，TS默认会把它的类型推断为仅undefined类型，而不是你预期的Piece | undefined联合类型，所以传Piece类型的参数赋值时就会报类型不匹配错误。

解决方案1：直接用类型断言（最简便） #

不需要额外写初始化函数，直接在state初始值里给undefined加类型断言即可：

export const useStore = defineStore("game", {
  state: () => {
    return {
      moves: [],
      gameBoard:  getInitialBoard(),
      playerTurn: PieceColor.White,
      // 直接指定类型为 Piece | undefined
      previousPieceSelected: undefined as Piece | undefined
    }
  },
  actions: {
    changePlayer() {
      this.playerTurn =
          this.playerTurn === PieceColor.White
            ? PieceColor.Black
            : PieceColor.White;
    },
    updatePreviousPieceSelected(piece: Piece | undefined ) {
      this.previousPieceSelected = piece
    }
  }
})

解决方案2：显式声明State类型（更规范，适合大型项目） #

提前定义Store的State接口，作为泛型传入defineStore，TypeScript会严格按照你定义的类型校验state字段，不需要额外的断言：

// 先定义State的类型结构，字段类型完全自定义
interface GameStoreState {
  moves: any[] // 可替换为你实际的走棋记录类型，比如Move[]
  gameBoard: ReturnType<typeof getInitialBoard> // 自动复用getInitialBoard的返回类型
  playerTurn: PieceColor
  previousPieceSelected: Piece | undefined
}

// 给defineStore传入State类型泛型，第一个泛型参数是store的id类型
export const useStore = defineStore<"game", GameStoreState>("game", {
  state: () => {
    return {
      moves: [],
      gameBoard: getInitialBoard(),
      playerTurn: PieceColor.White,
      // 这里初始值直接写undefined即可，TS会自动匹配你定义的接口类型
      previousPieceSelected: undefined
    }
  },
  actions: {
    changePlayer() {
      this.playerTurn = this.playerTurn === PieceColor.White ? PieceColor.Black : PieceColor.White
    },
    updatePreviousPieceSelected(piece: Piece | undefined) {
      this.previousPieceSelected = piece
    }
  }
})

注：你最早贴的第一版store代码里，updatePreviousPieceSelected方法没有放在actions配置项里，这个问题已经在上面的示例代码中修正。

内容的提问来源于stack exchange，提问作者avenmia