为何可选链操作符无法满足TypeScript类型检查要求？

我有如下React事件处理函数：

onClick={(e: MouseEvent<HTMLElement>) => {
     const link = e.target.href;
}}

我清楚报错原因：e.target可能是带href属性的<a>标签，也可能是无该属性的子元素，直接访问会有风险。

尝试用可选链操作符后，仍报错：

onClick={(e: MouseEvent<HTMLElement>) => {
     const link = e.target?.href;
}}

同样，判断后再访问也无法解决：

onClick={(e: MouseEvent<HTMLElement>) => {
     if (!e.target.href) return;
     const link = e.target.href;
}}

两种写法都会触发TypeScript错误：Property 'href' does not exist on type 'EventTarget'.ts(2339)。

如何在不使用@ts-ignore的前提下，表达“我不在意e.target是否有href属性”？

解决方案 #

下面几种方法都可以规避该类型错误，且不需要使用@ts-ignore：

1. 类型断言为包含可选href的类型 #

直接通过类型断言告诉TypeScript，e.target可能带有可选的href属性：

onClick={(e: MouseEvent<HTMLElement>) => {
  const link = (e.target as { href?: string })?.href;
  // link 类型为 string | undefined，无报错
}}

2. 使用类型守卫检查属性存在性 #

通过'href' in e.target的类型守卫，让TypeScript在代码块内识别e.target具有href属性，同时自然忽略无该属性的情况：

onClick={(e: MouseEvent<HTMLElement>) => {
  if ('href' in e.target) {
    const link = e.target.href;
    // 仅在存在href属性时执行后续逻辑
  }
}}

3. 改用currentTarget（如果事件绑定在标签上） #

如果你的onClick事件直接绑定在<a>标签上，使用e.currentTarget代替e.target会更安全——currentTarget始终指向绑定事件的元素，类型可以明确指定为HTMLAnchorElement：

onClick={(e: MouseEvent<HTMLAnchorElement>) => {
  const link = e.currentTarget.href;
}}

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