React中使用not-null assertion operator构建报错原因咨询

核心原因 #

这个报错本质是代码解析器无法识别TypeScript专属语法，而非真的缺少分号：普通JavaScript解析器不认识非空断言运算符!，会将其判定为非法字符，抛出语法错误。
常见触发场景如下：

• 项目没有安装TypeScript对应的代码解析依赖，ESLint用默认的JS解析器处理.tsx文件
• 已安装依赖但ESLint/Babel配置未正确匹配.tsx后缀文件，仍使用JS规则解析该文件
• 依赖版本过低，旧版本的TypeScript解析包不支持对应语法

修复步骤 #

1. 配置ESLint TypeScript解析器 #

首先安装必要依赖：
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
然后修改项目根目录的ESLint配置文件（.eslintrc.js/.eslintrc.json等），添加如下配置：

module.exports = {
  parser: '@typescript-eslint/parser', // 指定TS解析器
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: { jsx: true } // 支持TSX语法
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended'
  ]
}

2. 配置Babel TypeScript预设（如果项目使用Babel编译） #

安装依赖：
npm install @babel/preset-typescript --save-dev
修改Babel配置文件（babel.config.json/.babelrc）：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    ["@babel/preset-typescript", {
      "isTSX": true,
      "allExtensions": true
    }]
  ]
}

3. 额外代码逻辑修复 #

你贴出的代码中直接在组件顶级作用域调用setTest的写法不符合React规范，会触发无限重渲染，需要将状态更新逻辑放到useEffect钩子或者事件回调中：

import { useState, useEffect } from 'react';

// 组件内部代码
const [test, setTest] = useState<string | null>(null);

useEffect(() => {
  setTest("test");
}, []);

const test2: string = test!; // 非空断言此时可正常识别

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