ReactJS中try catch语句编写报错如何修复

代码中catch (e : TypeError)是TypeScript专属的类型注解语法，原生JavaScript不支持在catch子句的参数后直接写类型标注，运行时会直接触发语法错误。
除此之外，代码中直接访问window.device.version也存在逻辑风险：绝大多数桌面、移动端浏览器环境下window对象本身不存在device属性，直接读取嵌套属性会触发TypeError，即便修正语法也会进入错误捕获分支。

• 移除catch参数后的类型标注，若需要判断捕获的错误类型，在catch代码块内部通过instanceof做类型校验即可。
• 访问嵌套对象属性时增加可选链操作符?.，避免上层属性不存在时直接抛出错误。

修复后的完整可运行代码如下：

const Login = () => {
    const navigate = useNavigate();

    const [Data, setData] = useState({
        email: "",
        password: ""
    });

    const { email, password } = Data;

    const onChangedata = (e) => {
        setData({ ...Data, [e.target.name]: e.target.value });
    }

    const submitdata = async (e) => {
        e.preventDefault();
        try {
            console.log(window.device?.version)
        } catch (e) {
            // 需要判断错误类型时在块内做校验
            if (e instanceof TypeError) {
                console.log('捕获到类型错误:', e.message)
            }
            console.log('Error')
        }
    }
}

如果你是在.tsx后缀的TypeScript文件中编写代码，catch子句的参数默认类型为unknown，同样不支持直接在参数位置标注TypeError，必须在块内部做类型收窄判断。

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