如何定义使用扩展运算符传递道具的类型

Question

type TypeData = {
  data: {
    id: string;
    class: string;
    name: string;
    country: string;
    ew_get_url: string;
    ew_post_url: string;
    rocket_id: string;
    pages: {
      landing: {
        h1: string;
        h2: string;
      }
    }
  }
}

我不能使用展开运算符，错误在元素中，有VSC显示的错误

Property 'data' is missing in type '{ id: string; class: string; name: string; country: string; ew_get_url: string; ew_post_url: string; rocket_id: string; pages: { landing: { h1: string; h2: string; }; }; }' but required in type 'PropsType'.

export default function Funnel(props: TypeData): JSX.Element {
  const { data } = props;

  return (
    <>
      <Head><title>Start your own e-Comm biz now!</title></Head>

      <DataTest data={data} />
      <div style={{
        backgroundImage: `url("/img/${data.class}/landing/bg.jpg")`,
        backgroundAttachment: 'fixed',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        minHeight: '100vh'
      }}>
        **<Template {...data}></Template>**
      </div>
    </>
  );
}

Answer 1

在 PropsType 中，您要求 'data' 属性（可能您指定了 TypeData）。但是，您传递了数据对象内部的属性（因为扩展运算符打开了对象）。所以模板需要：{ data: {id: string; class：字符串；名称：字符串 ...} } 您提供：{ id: string; class：字符串；名称：字符串...}

您可以去掉展开运算符，只为模板传入数据。或者你修改Template的PropsType。

如何定义使用扩展运算符传递道具的类型

How to define the type for use the spread operator to pass props

typescript

reactjs

typescript-typings