扩展和覆盖接口属性答案

【问题标题】：Extending and overriding interface properties扩展和覆盖接口属性
【发布时间】：2021-09-18 06:11:05
【问题描述】：

我正在尝试扩展接口，但似乎无法掌握泛型的想法。如您所见，我正在尝试在props 中添加属性auth。

我的代码有效，但我真的需要重新导入扩展界面上的每个属性吗？看来我这里做错了。

Inertia-JS Typescript 定义

export interface PageProps {
    [key: string]: unknown;
}

export interface Page<SharedProps = PageProps> {
    component: string;
    props: PageProps & SharedProps & {
        errors: Errors & ErrorBag;
    };
    url: string;
    version: string | null;
    scrollRegions: Array<{
        top: number;
        left: number;
    }>;
    rememberedState: Record<string, unknown>;
    resolvedErrors: Errors;
}

我的代码：

export type User = {
  id: number;
  name: string;
  email: string;
}

interface PropsInterface extends Page {
  props: PageProps & {
    errors: Errors & ErrorBag;
    auth: {
      user: User
    }
  }
}

JSX

import { Page, PageProps } from '@inertiajs/inertia';
import { ErrorBag, Errors } from '@inertiajs/inertia/types/types';
import { usePage } from '@inertiajs/inertia-react';

export default function Topbar(): JSX.Element {
  const { url, component, props } = usePage<PropsInterface>();
  const { user } = props.auth
}

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

试试这个

export type User = {
  id: number;
  name: string;
  email: string;
}

interface PropsInterface extends Page<{ auth: { user: User } }> {}

【讨论】：