TypeScript中使用null as string | null报解析错误如何修复

你遇到的解析报错核心是react-scripts@4.0.3内置的低版本TypeScript ESLint解析器，无法兼容TypeScript 4.3+的as类型断言语法，因此在扫描到null as string | null这段代码时，会误判为非法语法抛出错误。

你可以根据自己的项目情况选择以下任意一种方案解决：

• 方案1：升级react-scripts到5.x版本
  5.x版本的react-scripts更新了内置的ESLint和TS解析器，原生兼容高版本TypeScript语法，直接执行下面的命令升级即可：

  npm install react-scripts@latest
  # 或使用yarn
  yarn add react-scripts@latest
  

  升级完成后重启开发服务即可。

• 方案2：使用createSlice泛型声明替代类型断言
  如果你暂时不想升级框架依赖，可以通过给createSlice显式指定泛型的方式，省略as类型断言写法，避开解析问题：

  import { createSlice, PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
  
  const selectedTodoSlice = createSlice<string | null, SliceCaseReducers<string | null>, "selectedTodo">({
    name: "selectedTodo",
    initialState: null, // 泛型已经指定了state类型，不需要额外断言
    reducers: {
      select: (state, { payload }: PayloadAction<{ id: string }>) => payload.id
    }
  });
  

• 方案3：单独升级ESLint的TS解析器
  你也可以单独安装高版本的TS解析器依赖，在项目根目录新增.eslintrc配置文件指定解析器：
  首先安装依赖：

  npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
  

  然后在.eslintrc中添加配置：

  {
    "extends": ["react-app"],
    "parser": "@typescript-eslint/parser"
  }
  

  配置完成后重启开发服务即可。

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