TypeScript React中如何实现编译时条件类型检查？

针对React组件的需求，结合TypeScript的泛型和条件类型，可以在编译时区分字符串子元素，同时保留运行时检查处理动态场景，以下是两种实现方案：

方案1：泛型组件自动推导 #

import * as React from "react";
import { render } from "react-dom";

// 泛型Props，约束子元素为ReactNode
type FunProps<T extends React.ReactNode> = {
  children: T;
};

const Fun = <T extends React.ReactNode>({ children }: FunProps<T>) => {
  // 编译时根据T的类型推断分支逻辑
  if (typeof children === "string") {
    return <p style={{ backgroundColor: "yellow" }}>{children}</p>;
  }
  return <>{children}</>;
};

render(
  <>
    <Fun>{"123"}</Fun> {/* 编译时知道会渲染带黄色背景的p标签 */}
    <Fun>{123}</Fun> {/* 编译时知道直接渲染数字 */}
  </>,
  document.getElementById("root")
);

方案2：组件重载（更严格的编译时约束） #

通过组件重载，明确区分字符串和非字符串子元素的处理逻辑，编译时就能精准识别：

import * as React from "react";
import { render } from "react-dom";

// 重载1：处理字符串子元素
function Fun({ children }: { children: string }): JSX.Element;
// 重载2：处理非字符串子元素
function Fun({ children }: { children: Exclude<React.ReactNode, string> }): JSX.Element;

// 组件实现
function Fun({ children }: { children: React.ReactNode }) {
  if (typeof children === "string") {
    return <p style={{ backgroundColor: "yellow" }}>{children}</p>;
  }
  return <>{children}</>;
}

render(
  <>
    <Fun>{"123"}</Fun>
    <Fun>{123}</Fun>
  </>,
  document.getElementById("root")
);

内容的提问来源于stack exchange，提问作者Page not found