TypeScript使用as关键字报Unexpected token预期逗号错误如何解决

问题原因 #

你遇到的不是TypeScript的类型校验错误，是语法解析错误：普通的JavaScript解析器无法识别TypeScript专属的as类型断言语法，才会抛出Unexpected token的报错。结合你用CRA搭建项目的背景，大概率是ESLint/Babel的解析器配置异常，或者依赖损坏导致的。

解决方案 #

1 基础校验 #

首先确认你所有写TS语法的文件后缀都是.ts/.tsx，不要误用.js/.jsx后缀，后缀错误会导致解析器把TS代码当成普通JS代码解析，直接识别不了as语法。

2 修复ESLint配置 #

如果你的项目根目录下有.eslintrc、.eslintrc.json等ESLint配置文件，确保配置了正确的TS解析器：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ]
}

同时确保项目已经安装了对应依赖：

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

3 修复Babel配置 #

如果你自定义过Babel配置（根目录有babel.config.json/.babelrc文件），确保presets中包含@babel/preset-typescript，且顺序在@babel/preset-react之前。
如果没有自定义过CRA的默认配置，大概率是依赖损坏，可以执行以下操作重置：

• 删除项目根目录的node_modules文件夹和锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
• 重新执行包安装命令：npm install（或对应包管理器的安装命令）
• 重启开发服务器

4 临时绕开方案 #

你当前的业务场景完全可以不用as类型断言：你已经给input绑定了element这个ref，直接通过ref调用blur方法更安全，也不会触发语法报错：

if (e.key === 'Enter') {
    element.current?.blur();
    clearSelection();
}

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