TypeScript中instanceof失效，如何判断props为LinkProps或AnchorProps

问题原因 #

instanceof 是 JavaScript 原生的运行时运算符，仅能用于判断类实例的原型链继承关系，而你定义的 LinkProps、AnchorProps 都属于 TypeScript 静态类型，只会在编译阶段生效，编译完成后会被完全擦除，运行时不存在对应的实体值，因此无法用 instanceof 做判断。

解决方案：用类型守卫收窄联合类型 #

你可以通过判断唯一标识属性的方式实现类型收窄，TS 会自动识别这类判断逻辑，完成类型推导。

第一步：明确类型定义 #

首先保证两个类型存在唯一的可区分特征，此处你可以利用 to 属性是否存在作为区分标识，需要将 Anchor 类型的 to 属性显式标记为不存在：

import { LinkProps as RouterLinkProps } from 'react-router-dom';
import { AnchorHTMLAttributes } from 'react';

// 路由Link的props类型
type LinkProps = RouterLinkProps & {
  // 可添加你的自定义属性
}

// 普通a标签的props类型，显式标记不存在to属性
type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
  // 可添加你的自定义属性
  to?: never;
}

type CustomLinkProps = LinkProps | AnchorProps;

第二步：实现类型判断 #

方案1：直接内联判断（简单场景推荐）

直接用 in 运算符判断 to 属性是否存在即可，TS 会自动完成类型收窄：

const CustomLink = (props: CustomLinkProps) => {
  if ('to' in props) {
    // 此处props自动推导为LinkProps类型
    return <StyledLink {...props} />
  }
  // 此处props自动推导为AnchorProps类型
  return <StyledAnchor {...props} />
}

方案2：抽离独立类型守卫（复用场景推荐）

如果判断逻辑需要在多处复用，可以抽成专用的类型守卫函数：

function isLinkProps(props: CustomLinkProps): props is LinkProps {
  return 'to' in props;
}

const CustomLink = (props: CustomLinkProps) => {
  if (isLinkProps(props)) {
    return <StyledLink {...props} />
  }
  return <StyledAnchor {...props} />
}

可选优化：显式添加可辨识字段 #

如果业务逻辑中 Anchor 标签也可能传入 to 属性，建议给两个类型增加专属的可辨识字段，判断逻辑更稳定：

type LinkProps = RouterLinkProps & {
  type: 'router'
}

type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
  type: 'anchor'
}

const CustomLink = (props: CustomLinkProps) => {
  if (props.type === 'router') {
    return <StyledLink {...props} />
  }
  return <StyledAnchor {...props} />
}

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