如何为React组件的索引访问型Props创建TypeScript接口

1. 统一开支项类型定义 #

先明确单个开支项的类型，建议将该类型抽离为公共文件（比如types/Expense.ts），也可直接在组件内定义：

interface Expense {
  id: string;
  title: string;
  amount: number;
  date: Date;
}

2. 正确定义Expenses组件的Props类型 #

在Expenses.tsx中，将Props的items字段指定为Expense[]类型，让TypeScript能正确推断数组项的属性：

// Expenses.tsx
interface ExpensesProps {
  items: Expense[];
}

interface Expense {
  id: string;
  title: string;
  amount: number;
  date: Date;
}

export default function Expenses({ items }: ExpensesProps) {
  return (
    <Card className="expenses">
      {/* 用map循环渲染，替代硬编码的多个ExpenseItem */}
      {items.map(expense => (
        <ExpenseItem
          key={expense.id}
          id={expense.id}
          title={expense.title}
          amount={expense.amount}
          date={expense.date}
        />
      ))}
    </Card>
  );
}

3. 修正App.tsx中的类型错误 #

App.tsx里的addExpenseHandler参数类型需改为单个Expense类型：

// App.tsx
interface Expense {
  id: string;
  title: string;
  amount: number;
  date: Date;
}

export default function App() {
  const expenses: Expense[] = [
    { id: `e1`, title: `Toilet Paper`, amount: 94.12, date: new Date(2020, 7, 14) },
    { id: `e2`, title: `New TV`, amount: 799.49, date: new Date(2021, 2, 12) },
    { id: `e3`, title: `Car Insurance`, amount: 294.67, date: new Date(2021, 2, 28) },
    { id: `e4`, title: `New Desk (Wooden)`, amount: 450, date: new Date(2021, 5, 12) }
  ];

  function addExpenseHandler(expense: Expense) {
    console.log(`In App.js`);
    console.log(expense);
  }

  return (
    <div>
      <NewExpense onAddExpense={addExpenseHandler} />
      <Expenses items={expenses} />
    </div>
  );
}

原类型无效的原因 #

• object类型：TypeScript无法识别对象内部的具体属性，访问id/title等字段会报错。
• Array<string | number | Date>：该类型表示数组元素是单一的字符串/数字/日期值，但你的数组元素是包含这些类型属性的对象，类型完全不匹配。

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