Typescript and destructured variables not recognising props

Question

I have a function that returns data. The object that gets returned contains headerMenu, page, content and footer. These are all returned as objects of which all of this is defined in DataProps

With the line const { headerMenu, page: { content }, footer }: DataProps = data Its throwing an error saying that Type '{}' is missing the following properties from type 'DataProps': headerMenu, page, content, footer

But we can see the props are defined here? What am I missing here or can we not use destructuring in TS

Full component code below

type IndexProps = {
  postData: object,
  preview: boolean,
}

type PreviewSubscriptionProps = {
  data: object,
}

type DataProps = {
  headerMenu: object,
  page: object,
  content: object,
  footer: object,
}

export default function Index({ postData, preview } : IndexProps) {
  const router = useRouter();
  
  const {data} : PreviewSubscriptionProps = usePreviewSubscription(HomepageGroq, {
    initialData: postData,
    enabled: preview || router.query.preview !== undefined,
  });

  const { headerMenu, page: { content }, footer }: DataProps = data

  return (
    <>
      <SiteHeader headerMenu={headerMenu} />

      <Content content={content} />

      <SiteFooter footer={footer} />
    </>
  );
}```

You should type `PreviewSubscriptionProps` as `type PreviewSubscriptionProps = { data: DataProps }`, and properly type the `DataProps` properties as well. Avoid using `object`. — juliomalves, May 13 '22 at 18:05

score 1 · Answer 1 · answered May 12 '22 at 06:51

1

PreviewSubscriptionProps has a key data of object type.

type PreviewSubscriptionProps = {
  data: object,
}

In TS, object type is used to represent just a non primitive type. It is not a string,number,boolean etc. But, it is not guaranteed to have any key.

A min repro example

 const {data} : PreviewSubscriptionProps = ...
 const { headerMenu, page: { content }, footer }: DataProps = data

In the above statement you try to destructure the data key. But data is just of object type. Hence you get the error.

You can use any instead of object if you are not sure about the keys. Read more

Further, you will also face an issue here:

const { headerMenu, page: { content }, footer }: DataProps = data

The above means you are trying to extract content key from page. You would want to extract like this:

const { headerMenu, page, content , footer }: DataProps = data

answered May 12 '22 at 06:51

Tushar Shahi

16,452
1
18
39

Not sure that last part will work as content is a child of page. I think this might be where I'm getting my head mixed up with typescript. – Shane Jones May 12 '22 at 08:49
If `content` is a child of `page`. Shouldn't you use this ? type DataProps = { headerMenu: object, page: { content: object ...otherproperties}, footer: object, } – Tushar Shahi May 12 '22 at 09:09
if I add page: {content: object} content is not accessible in the rest of my script. Windering if you can't destructure to this second level – Shane Jones May 12 '22 at 10:30

Shikhar Awasthi · Answer 2 · 2022-05-12T07:04:32.890

0

PreviewSubscriptionProps type does not all the keys of DataProps type fix that and you are destructuring like this const { headerMenu, page: { content }, footer }: DataProps = data but your DataProps type has been defined like

type DataProps = {
  headerMenu: object,
  page: object,
  content: object,
  footer: object,
}

content is not in an page. Fix this also. Either destructure like this const { headerMenu, page, content, footer }: DataProps = data or modify DataProps type.

edited May 12 '22 at 07:04

answered May 12 '22 at 06:58

Shikhar Awasthi

1,172
1
3
13

As mentioned on the other answer. "Not sure that will work as content is a child of page. I think this might be where I'm getting my head mixed up with typescript" – Shane Jones May 12 '22 at 09:08
If content is child of page then DataProps will be like `type DataProps = {headerMenu : object, page : { content : object}, footer : object}` – Shikhar Awasthi May 12 '22 at 09:13

Typescript and destructured variables not recognising props

2 Answers2