React 打字稿：RouterProps：接口只能扩展对象类型或具有静态已知成员的对象类型的交集

Question

我在 React 项目中使用 typescript，并且我有在 Chatgpt 的帮助下获得的代码：

import React from "react";
import { Route, Navigate, RouteProps } from "react-router-dom";
import { useAuth } from "./AuthContext";

interface PrivateRouteProps extends RouteProps {
  children?: React.ReactNode;
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, ...rest }) => {
  const { token } = useAuth();

  return (
    <Route
      {...rest}
      element={token ? children : <Navigate to="/login" replace />}
    />
  );
};

export default PrivateRoute;

显示此错误： 接口只能扩展对象类型或对象类型与静态已知成员的交集。

错误来自此行中的“extends RouteProps”：

interface PrivateRouteProps extends RouteProps {
  children?: React.ReactNode;
}

有人可以帮助我吗？

谢谢

Answer 1

发生这种情况是因为 RouteProps 不是一个接口，它是多个接口的联合。来自 6.3.0 类型定义：

export declare type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps

您无法从联合扩展接口，但您可以使用类型交集执行基本相同的操作：

type PrivateRouteProps = RouteProps & {
  children?: React.ReactNode
}

另请参阅：https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences- Between-type-aliases-and-interfaces