如何检查非原始类型变量的类型？TypeScript组件场景实现方案

针对你给出的类型场景，需要针对不同类型分别使用对应的类型判断方式，以下是修正后的代码：

import React from 'react';

type Type01 = {
  path: string;
  label: string;
};

type ComponentTestType = {
  button: Type01 | "default" | JSX.Element;
};

// 自定义类型守卫，判断是否为Type01类型
function isType01(value: unknown): value is Type01 {
  return (
    typeof value === 'object' &&
    value !== null &&
    'path' in value &&
    typeof (value as Type01).path === 'string' &&
    'label' in value &&
    typeof (value as Type01).label === 'string'
  );
}

export function ComponentTest({ button }: ComponentTestType) {
  // 检查字符串字面量"default"
  if (button === "default") {
    console.log('处理default按钮逻辑');
    // 渲染对应组件
    return <button>默认按钮</button>;
  } 
  // 检查JSX.Element类型
  else if (React.isValidElement(button)) {
    console.log('直接传入的JSX元素');
    // 直接渲染该元素
    return button;
  } 
  // 检查Type01类型
  else if (isType01(button)) {
    console.log('处理Type01类型的按钮逻辑');
    // 基于path和label渲染组件
    return <a href={button.path}>{button.label}</a>;
  }
  // 兜底处理（理论上不会走到这里，因为类型已经覆盖）
  return null;
}

关键说明： #

• 字符串字面量"default"：直接用严格相等===判断即可，不需要typeof（typeof "default"结果是"string"，原写法逻辑错误）。
• JSX.Element类型：使用React提供的React.isValidElement()工具函数，这是判断JSX元素的标准方式。
• 自定义对象类型Type01：通过自定义类型守卫函数isType01，检查对象是否包含指定属性且属性类型匹配，让TypeScript能在分支中正确推断类型。

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