Merge pull request #29154 from joaovieira/next/static-lifecycle

[@types/next] Static lifecycle for App and Document base classes.

types/next/app.d.ts

@@ -13,7 +13,7 @@ export type AppComponentContext = NextAppContext;
  *
  * @template Q Query object schema.
  */
-export interface NextAppContext<Q = DefaultQuery> {
+export interface NextAppContext<Q extends DefaultQuery = DefaultQuery> {
     Component: NextComponentType<any, any, NextContext<Q>>;
     router: RouterProps<Q>;
     ctx: NextContext<Q>;
@@ -25,7 +25,7 @@ export interface NextAppContext<Q = DefaultQuery> {
  *
  * @template Q Query object schema.
  */
-export interface AppProps<Q = DefaultQuery> {
+export interface AppProps<Q extends DefaultQuery = DefaultQuery> {
     Component: NextComponentType<any, any, NextContext<Q>>;
     router: RouterProps<Q>;
     pageProps: any;
@@ -41,6 +41,6 @@ export interface AppProps<Q = DefaultQuery> {
 export type AppComponentType<IP = {}, C = NextAppContext> = NextComponentType<IP & AppProps, IP, C>;
 
 export class Container extends React.Component {}
-export default class App<IP = {}, C = NextAppContext> extends React.Component<IP & AppProps> {
-    getInitialProps(context: C): Promise<IP> | IP;
+export default class App<P = {}> extends React.Component<P & AppProps> {
+    static getInitialProps(context: NextAppContext): Promise<{ pageProps: any }>;
 }

types/next/document.d.ts

@@ -30,7 +30,7 @@ export type Enhancer<E extends PageProps = AnyPageProps, P extends any = E> = (
  *
  * @template Q Query object schema.
  */
-export interface NextDocumentContext<Q = DefaultQuery> extends NextContext<Q> {
+export interface NextDocumentContext<Q extends DefaultQuery = DefaultQuery> extends NextContext<Q> {
     /** A callback that executes the actual React rendering logic (synchronously) */
     renderPage<E extends PageProps = AnyPageProps, P extends any = E>(
         enhancer?: Enhancer<E, P> // tslint:disable-line no-unnecessary-generics
@@ -86,8 +86,6 @@ export type DocumentComponentType<IP = {}, C = NextDocumentContext> = NextCompon
 export class Head extends React.Component<HeadProps> {}
 export class Main extends React.Component {}
 export class NextScript extends React.Component<NextScriptProps> {}
-export default class Document<IP = {}, C = NextDocumentContext> extends React.Component<
-    IP & DocumentProps
-> {
-    getInitialProps(context: C): Promise<IP> | IP;
+export default class Document<P = {}> extends React.Component<P & DocumentProps> {
+    static getInitialProps(context: NextDocumentContext): DocumentProps;
 }

types/next/index.d.ts

@@ -33,7 +33,7 @@ declare namespace next {
      *
      * @template Q Query object schema.
      */
-    interface NextContext<Q = DefaultQuery> {
+    interface NextContext<Q extends DefaultQuery = DefaultQuery> {
         /** path section of URL */
         pathname: string;
         /** query string section of URL parsed as an object */

types/next/test/next-app-tests.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
 import App, { Container, NextAppContext, AppProps, AppComponentType } from "next/app";
+import { DefaultQuery } from "next/router";
 
 interface NextComponentProps {
     example: string;
 }
 
-interface TypedQuery {
+interface TypedQuery extends DefaultQuery {
     id?: string;
 }
 
@@ -32,11 +33,12 @@ class TestAppWithProps extends App<NextComponentProps> {
     }
 }
 
-class TestAppWithTypedQuery extends App<{}, NextAppContext<TypedQuery>> {
+class TestAppWithTypedQuery extends App {
     static async getInitialProps({ ctx }: NextAppContext<TypedQuery>) {
         const { id } = ctx.query;
         const processQuery = (id?: string) => id;
         processQuery(id);
+        return { pageProps: id };
     }
 }
 

types/next/test/next-component-tests.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { NextStatelessComponent, NextContext, NextComponentType } from "next";
+import { DefaultQuery } from "next/router";
 
 interface NextComponentProps {
     example: string;
 }
 
-interface TypedQuery {
+interface TypedQuery extends DefaultQuery {
     id?: string;
 }