react高阶组件、HOC

Question

我这边封装一个高阶组件，如何正确的使用ts呢？
不用any!!
举例：
1、我现在传递的是navigate、params、name、location，但是我的组件props仅有navigate、name，多出来name和location，ts也没有如何报错
2、这个高阶组件的返回值类型是什么呢？

import { ElementType, ReactNode } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
interface Iprop {
    name: string,
    history?: Function,
    navigate: Function,
}
function withRouter(Component: any): ElementType {
    return (props: Iprop) => (
        <Component
            {...props}
            name="高阶组件的name"
            params={useParams()}
            location={useLocation()}
            navigate={useNavigate()}
        />
    );
}
export default withRouter;

Answer 1

基于Monster 组和GPT的调写：

• 避免用 any 类型是一个好实践，因为它可以提供更强的类型安全。对你的 withRouter 高阶组件进行改进，以更好地利用 TypeScript 的建议。

• 先定义传递给高阶组件的组件的 props 类型。由于你的高阶组件会添加 params、location 和 navigate 属性，你要在你的类型定义中包含这些。还应该允许传递给高阶组件的组件有其自己的 props。

import { ElementType, ReactNode, ComponentType } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";

// 定义传递给高阶组件的组件的额外 props
interface WithRouterProps {
    name: string;
    params: ReturnType<typeof useParams>;
    location: ReturnType<typeof useLocation>;
    navigate: ReturnType<typeof useNavigate>;
}

// 高阶组件本身的 props
interface OwnProps {
    name: string;
    // 根据需要添加其他 props
}

// 这个类型允许将自己的 props 与高阶组件添加的 props 合并
type CombinedProps<P> = P & OwnProps;

function withRouter<P>(Component: ComponentType<P & WithRouterProps>): ComponentType<CombinedProps<P>> {
    return (props: CombinedProps<P>) => {
        // 提取由高阶组件处理的 props，其余的传递给子组件
        const { name, ...restProps } = props;

        return (
            <Component
                {...restProps as P}
                name={name}
                params={useParams()}
                location={useLocation()}
                navigate={useNavigate()}
            />
        );
    };
}

• withRouter是一个泛型函数，它接受一个类型参数P，这代表了传递给它的组件的 props 类型。WithRouterProps接口定义了高阶组件添加的 props，而OwnProps` 接口定义了高阶组件本身接受的 props。

• 通过这种方式，可以确保类型安全性，并且如果你尝试用一个未在组件 props 类型中定义的属性，TypeScript 将给出错误。同时，这样做也为高阶组件的返回值提供了正确的类型信息。