CODEWITHSUNDEEP
typescriptnext.js
Gary
Gary

Reputation: 1017

Function return type from a NextJS function?

I'm working w/NextJS 13, a layout.tsx file and I see this --

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head />
      <body>{children}</body>
    </html>
  );
}

I understand that { children } above is destructing from props, but what's the second part?

I don't understand what's after the ":" --

{ children: React.ReactNode }

Is this the return type?

I don't see this appended to functions often, which is why I'm asking.

Upvotes: 1

Views: 3126

Answers (1)

OGreeni
OGreeni

Reputation: 786

This is not the return type, but the parameter type of the function. Consider a simplified example:

function add({num1, num2}: {num1: number, num2: number}) {
   return num1 + num2;
}

This function destructures the object parameter and extracts num1 and num2 into their own variables. In addition, it specifies that the argument provided to the function must be an object with keys num1 and num2, both of type number.

add({num1: 5, num2: '7'}); // Type 'string' is not assignable to type 'number'

add({num1: 5, num3: 4}); // Argument of type '{ num1: number; num3: number; }' is not assignable to parameter of type '{num1: number; num2: number; }'

Upvotes: 1

Related Questions