在 React 項目中，Record<string, any> 和 { [key: string]: any } 在功能層面幾乎等價（都表示「鍵為字符串、值為任意類型的對象」），但在類型語義、語法靈活性、TS 內置特性上存在關鍵區別，以下是詳細拆解（結合 React 實戰場景説明）：

一、核心結論先明確

二、具體區別與 React 實戰示例

1. 語義與設計初衷

• Record<K, V> 是 TypeScript 內置工具類型，設計初衷是「明確表示一個鍵類型為 K、值類型為 V 的鍵值對映射對象」，語義更聚焦“映射”；
• { [key: string]: V } 是 TypeScript 基礎索引簽名語法，設計初衷是「定義對象的索引規則」，語義更聚焦“對象的索引方式”。

在 React 中，比如聲明一個“動態配置對象”：

// Record：語義更清晰（“字符串鍵 → 任意值”的映射）
const formConfig: Record<string, any> = {
  username: { label: '用户名', required: true },
  password: { label: '密碼', type: 'password' },
};

// 索引簽名：語義偏“對象的索引規則”，功能等價
const formConfig: { [key: string]: any } = {
  username: { label: '用户名', required: true },
  password: { label: '密碼', type: 'password' },
};

2. 語法靈活性（React 中最關鍵的區別）

{ [key: string]: any } 支持混合「固定屬性 + 動態索引」，而 Record<string, any> 只能表示「純動態鍵值對」—— 這在 React 組件 Props 定義中尤為常用：

// ✅ 合法：索引簽名 + 固定屬性（React Props 常用）
interface InputProps {
  // 固定屬性
  defaultValue: string;
  onChange: (value: string) => void;
  // 動態屬性（兼容其他未顯式聲明的 props）
  [key: string]: any;
}

// ❌ 非法：Record 無法混合固定屬性
interface InputProps extends Record<string, any> {
  defaultValue: string; // 語法上允許，但語義矛盾（Record 是純動態映射）
  onChange: (value: string) => void;
}

比如 React 中封裝通用組件時，常需要「固定核心 Props + 兼容任意擴展屬性」，此時只能用索引簽名，而 Record 做不到這種混合：

// 正確：用索引簽名封裝通用按鈕 Props
interface ButtonProps {
  type: 'primary' | 'default';
  size: 'small' | 'large';
  [key: string]: any; // 兼容 className、style 等原生屬性
}

const Button = (props: ButtonProps) => {
  const { type, size, ...rest } = props;
  return <button className={`btn-${type}-${size}`} {...rest} />;
};

// 錯誤：Record 無法區分“固定屬性”和“動態屬性”
type ButtonProps = Record<string, any>; // 丟失 type/size 的類型校驗

3. 類型參數擴展（非 React 專屬，但影響寫法）

Record<K, V> 的 K 支持聯合類型（比如 string | number），而索引簽名的 key 只能是 string/number/symbol 單一類型（但實際中 number 鍵會被轉為 string，效果等價）：

// ✅ Record 支持聯合鍵類型
type MixedKeyObj = Record<string | number, any>;
const obj: MixedKeyObj = {
  name: '張三',
  123: '數字鍵', // 合法
};

// ✅ 索引簽名也支持 number，但實際鍵會轉字符串
type MixedKeyObj2 = { [key: number]: any };
const obj2: MixedKeyObj2 = {
  123: '數字鍵', // 合法（鍵實際是 "123"）
  // 'name': '張三' // ❌ 索引簽名是 number，不允許字符串鍵
};

4. 代碼簡潔性

• 當只需聲明「字符串鍵 + 任意值」時，Record<string, any> 比 { [key: string]: any } 更簡潔；

• 當需要自定義值類型（比如 string | number），兩者簡潔度相當：

  // 等價寫法
  type StrNumObj1 = Record<string, string | number>;
  type StrNumObj2 = { [key: string]: string | number };

三、React 項目中的選擇建議

四、避坑提醒（React 中常見誤區）

1. 不要濫用 any：無論是 Record<string, any> 還是 { [key: string]: any }，any 會丟失 TypeScript 類型校驗，React 中建議儘量指定具體值類型（比如 Record<string, FormItemConfig>）；

2. 函數組件 Props 擴展：如果想兼容 React 原生 HTML 屬性，推薦用 React.HTMLAttributes<HTMLElement> 而非純索引簽名，比如：

   interface CustomInputProps extends React.HTMLAttributes<HTMLInputElement> {
     value: string;
     onChange: (value: string) => void;
   }

最終總結

在 React 項目中，Record<string, any> 和 { [key: string]: any } 功能上等價（都表示字符串鍵的任意對象），核心差異在：

• Record 更簡潔、語義聚焦“映射”，適合純動態對象；
• 索引簽名更靈活，支持混合固定屬性，適合組件 Props 等場景。

日常開發中可根據“是否需要混合固定屬性”選擇，無需過度糾結，重點是避免濫用 any，儘量指定具體類型。