如何实现React组件索引超出范围时TypeScript返回类型错误

要让index超出子元素数量时触发TypeScript类型错误，需借助泛型和元组类型动态约束index的取值范围，具体实现如下：

类型定义与组件实现 #

将组件定义为泛型组件，让children的类型固定为元组，同时把index限制为该元组的有效索引：

import React from 'react';

// 泛型Props类型，C表示子元素组成的固定长度元组
type IComp<C extends React.ReactElement[]> = {
  children: [...C]; // 强制TypeScript将children推断为元组而非数组
  // 提取元组的数字字面量索引作为index的合法取值
  index: C extends { length: infer L } ? Exclude<keyof C, keyof any[]> : never;
};

function Comp<C extends React.ReactElement[]>(props: IComp<C>) {
  // 返回对应索引的子元素，符合需求
  return <div>{props.children[props.index]}</div>;
}

使用时的类型检查 #

在Main组件中，若传入的index超出子元素数量，TypeScript会立刻抛出类型错误：

function Main() {
  return (
    // 此处index={20}会报错：类型“20”不能赋值给类型“0 | 1 | 2”
    <Comp index={20}>
      <div>
        <p>One</p>
      </div>
      <div>
        <p>Two</p>
      </div>
      <div>
        <p>Three</p>
      </div>
    </Comp>
  );
}

核心逻辑说明 #

• 泛型C会捕获子元素的具体元组类型（比如上述例子中是包含3个React元素的元组），其length属性对应子元素数量。
• Exclude<keyof C, keyof any[]>过滤掉数组的通用方法键（如map、length），只保留元组的数字字面量索引（0、1、2），确保index只能取合法值。
• [...C]的写法避免TypeScript将children推断为可变长度数组，保证能准确获取有效索引范围。

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