TypeScript React回调中如何自动继承Props类型无需导入

方案1：直接内联回调（零额外类型定义，自动推断） #

如果回调逻辑不复杂，直接把回调函数写在CustomComponent的onSave属性位置，TypeScript会自动匹配组件定义的onSave类型，自动推断出参数的类型：

// ParentComponent.ts
import CustomComponent from './CustomComponent';

export default function ParentComponent () {
    return (
        <CustomComponent 
            onSave={(props) => {
                // 此处props会自动被推断为SaveProps类型，自带date、name的属性提示
                console.log(props.date, props.name);
            }}
        />
    )
}

方案2：抽离回调函数的类型提取方法 #

如果回调逻辑复杂需要抽离成独立函数，可以用TypeScript内置工具类型结合React的ComponentProps从组件本身提取参数类型，不需要从子组件文件导入任何自定义类型：

// ParentComponent.ts
import CustomComponent from './CustomComponent';
import type { ComponentProps } from 'react';

// 提取CustomComponent的onSave回调的第一个参数类型
type SaveProps = Parameters<ComponentProps<typeof CustomComponent>['onSave']>[0];

export default function ParentComponent () {
    const saveData = (props: SaveProps) => {
        // 此处props同样有完整的类型提示
        console.log(props.date, props.name);
    }

    return (
        <CustomComponent onSave={saveData} />
    )
}

原理解释 #

• ComponentProps<typeof CustomComponent> 是React提供的工具类型，可以直接提取目标组件的完整Props类型，不需要你手动导出子组件的Props接口。
• Parameters<函数类型>[索引] 是TypeScript内置工具类型，可以提取指定函数类型对应位置的参数类型，这里onSave只有一个参数，所以取索引0即可拿到SaveProps的完整类型定义。

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