如何通过TypeScript类型声明在编码阶段校验Tabs组件tabs与children长度一致？

要在编码阶段强制校验tabs和children的长度一致，你可以利用TypeScript的泛型和元组映射类型来实现，替代仅靠运行时判断的方式。

1. 重构Props类型定义 #

将原有的TabsProps改成泛型类型，通过泛型关联tabs和children的长度：

import React, { useState, Children, ReactNode } from 'react';

// 泛型Props，强制tabs和children长度一致
type TabsProps<T extends string[]> = {
  tabs: T;
  // 映射tabs的元组长度，生成对应长度的ReactNode数组类型
  children: [...{ [K in keyof T]: ReactNode }];
};

2. 改造Tabs组件为泛型组件 #

把组件定义为泛型组件，让TypeScript能根据传入的tabs元组自动推导children的长度要求：

const Tabs = <T extends string[]>({ tabs, children }: TabsProps<T>) => {
  const [activeTab, setActiveTab] = useState(0);
  const componentsToRender = Children.toArray(children);
  
  // 保留运行时判断作为兜底（应对绕过TypeScript类型校验的场景）
  if (componentsToRender.length !== tabs.length) {
    throw new Error('标签数量与子元素数量不匹配');
  }

  const handleTabSwitch = (index: number) => {
    setActiveTab(index);
  };

  return (
    <TabWrapper>
      <TabHeader tabs={tabs} activeTab={activeTab} onTabSwitch={handleTabSwitch} />
      <Dividers />
      <TabContent>
        {componentsToRender.map((component, i) => {
          return activeTab === i ? component : null;
        })}
      </TabContent>
    </TabWrapper>
  );
};

3. 使用方式与类型校验效果 #

当你使用组件时，TypeScript会自动校验children的长度是否和tabs一致：

// ✅ 正确用法：长度匹配
<Tabs tabs={['标签1', '标签2']}>
  <div>标签1对应的内容</div>
  <div>标签2对应的内容</div>
</Tabs>

// ❌ 错误用法：子元素少一个，编码阶段直接报错
<Tabs tabs={['标签1', '标签2']}>
  <div>标签1对应的内容</div>
</Tabs>

// ❌ 错误用法：子元素多一个，编码阶段直接报错
<Tabs tabs={['标签1']}>
  <div>标签1对应的内容</div>
  <div>多余的内容</div>
</Tabs>

如果你的tabs是动态生成的数组，可以用as const将其转为元组类型，让TypeScript能识别长度：

const dynamicTabs = ['动态标签1', '动态标签2'] as const;
<Tabs tabs={dynamicTabs}>
  <div>动态内容1</div>
  <div>动态内容2</div>
</Tabs>

核心逻辑说明 #

• 泛型T约束tabs为字符串元组（而非普通数组），让TypeScript能精确感知其长度。
• 映射类型{ [K in keyof T]: ReactNode }生成与tabs长度完全匹配的子元素类型，确保两者数量一致。
• 保留运行时判断作为兜底，避免因绕过TypeScript类型校验（比如使用any）导致的错误。

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