如何将React父子类组件数组Props代码转换为TypeScript？

嘿，作为曾经的TypeScript新手，我太懂这种头疼的感觉了！其实把这段代码转成TS没那么复杂，核心就是给你的数据和组件添加类型定义，咱们一步步来：

第一步：定义核心数据类型 #

首先，给你的列表项（每个包含itema和itemb的对象）定义一个接口，这是TS的基础，能让编辑器帮你做类型检查：

// 定义单个水果对的类型
interface FruitPair {
  itema: string;
  itemb: string;
}

第二步：改造父组件（Header） #

React的类组件需要通过泛型来指定Props和State的类型：

• 第一个泛型参数是父组件接收的外部Props（这里我们不需要外部Props，所以用{}）
• 第二个泛型参数是组件内部State的类型

改造后的父组件代码：

import React, { Component } from 'react';
import Fruits from './Fruits';

// 核心数据类型
interface FruitPair {
  itema: string;
  itemb: string;
}

// 父组件的State类型
interface HeaderState {
  lists: FruitPair[]; // 明确lists是FruitPair类型的数组
}

export default class Header extends Component<{}, HeaderState> {
  constructor(props: {}) {
    super(props);
    // 初始化State，TS会检查类型是否匹配
    this.state = {
      lists: []
    };
  }

  componentDidMount() {
    this.setState({
      lists: [
        { itema: 'apple', itemb: 'banana' },
        { itema: 'orange', itemb: 'apple' },
        { itema: 'banana', itemb: 'pear' }
      ]
    });
  }

  render() {
    return (
      <div>
        {/* 这里TS会自动检查传递给Fruits的lists类型是否正确 */}
        <Fruits lists={this.state.lists} />
      </div>
    );
  }
}

第三步：改造子组件（Fruits） #

函数组件需要定义接收的Props类型，这样TS就能检查父组件传递的参数是否符合要求：

import React from 'react';

// 注意：如果多个组件用到FruitPair，建议把它抽成单独的类型文件（比如types.ts），然后导入使用
interface FruitPair {
  itema: string;
  itemb: string;
}

// 子组件接收的Props类型
interface FruitsProps {
  lists: FruitPair[];
}

// 方式1：使用React.FC（函数组件专用类型）
export const Fruits: React.FC<FruitsProps> = (props) => {
  return (
    <div>
      {/* TS会自动推断v是FruitPair类型，写错属性名会直接报错 */}
      {props.lists.map((v, i) => (
        <div key={i}>
          <span>{v.itema}, {v.itemb}</span>
        </div>
      ))}
    </div>
  );
};

// 方式2：直接给函数参数标注类型（更简洁，很多开发者喜欢这种写法）
export default function Fruits(props: FruitsProps) {
  return (
    <div>
      {props.lists.map((v, i) => (
        <div key={i}>
          <span>{v.itema}, {v.itemb}</span>
        </div>
      ))}
    </div>
  );
}

额外小提示 #

1. 复用类型：如果FruitPair在多个组件中用到，建议把它放到单独的types.ts文件中导出，然后在需要的组件里导入，避免重复定义。
2. 类型推断：TS会自动帮你推断很多类型（比如map里的v），但如果不确定，手动标注类型会让代码更清晰。
3. Props检查：现在如果父组件给子组件传递的lists不符合FruitPair[]类型，TS会在编译阶段就报错，避免运行时bug。

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