Merge pull request #28950 from joaovieira/next/consistent-query-type

[@types/next] Consistent context query types.

types/next/index.d.ts

@@ -16,18 +16,18 @@ import * as url from "url";
 
 import { Response as NodeResponse } from "node-fetch";
 
-import { SingletonRouter } from './router';
+import { SingletonRouter, DefaultQuery } from './router';
 
 declare namespace next {
-    /** Map object used in query strings. */
-    type QueryStringMapObject = Record<string, string | string[] | undefined>;
+    // Deprecated
+    type QueryStringMapObject = DefaultQuery;
 
     /**
      * Context object used in methods like `getInitialProps()`
      * https://github.com/zeit/next.js/blob/6.1.1/server/render.js#L77
      * https://github.com/zeit/next.js/blob/6.1.1/readme.md#fetching-data-and-component-lifecycle
      */
-    interface NextContext<Q = QueryStringMapObject> {
+    interface NextContext<Q = DefaultQuery> {
         /** path section of URL */
         pathname: string;
         /** query string section of URL parsed as an object */
@@ -44,8 +44,8 @@ declare namespace next {
         err?: Error;
     }
 
-    type NextSFC<TProps = {}, Q = QueryStringMapObject> = NextStatelessComponent<TProps, Q>;
-    interface NextStatelessComponent<TProps = {}, Q = QueryStringMapObject>
+    type NextSFC<TProps = {}, Q = DefaultQuery> = NextStatelessComponent<TProps, Q>;
+    interface NextStatelessComponent<TProps = {}, Q = DefaultQuery>
         extends React.StatelessComponent<TProps> {
         getInitialProps?: (ctx: NextContext<Q>) => Promise<TProps>;
     }
@@ -142,28 +142,28 @@ declare namespace next {
             req: http.IncomingMessage,
             res: http.ServerResponse,
             pathname: string,
-            query?: QueryStringMapObject,
+            query?: DefaultQuery,
             parsedUrl?: UrlLike
         ): Promise<void>;
         renderToHTML(
             req: http.IncomingMessage,
             res: http.ServerResponse,
             pathname: string,
-            query?: QueryStringMapObject
+            query?: DefaultQuery
         ): Promise<string>;
         renderError(
             err: any,
             req: http.IncomingMessage,
             res: http.ServerResponse,
             pathname: string,
-            query?: QueryStringMapObject
+            query?: DefaultQuery
         ): Promise<void>;
         renderErrorToHTML(
             err: any,
             req: http.IncomingMessage,
             res: http.ServerResponse,
             pathname: string,
-            query?: QueryStringMapObject
+            query?: DefaultQuery
         ): Promise<string>;
         render404(
             req: http.IncomingMessage,

types/next/router.d.ts

@@ -26,15 +26,7 @@ export type PopStateCallback = (state: any) => boolean | undefined;
 
 export type RouterCallback = () => void;
 
-export interface DefaultQuery {
-    [key: string]:
-    | boolean
-    | boolean[]
-    | number
-    | number[]
-    | string
-    | string[];
-}
+export type DefaultQuery = Record<string, string | string[] | undefined>;
 
 export interface RouterProps<Q = DefaultQuery> {
     // url property fields

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

@@ -1,16 +1,19 @@
 import * as React from "react";
-import App, { Container } from "next/app";
+import App, { Container, AppComponentContext } from "next/app";
+import { NextStatelessComponent } from "next";
 
 interface NextComponentProps {
     example: string;
 }
 
 class TestApp extends App<NextComponentProps> {
-    static async getInitialProps({ Component, router, ctx }: any) {
+    static async getInitialProps({ Component, router, ctx }: AppComponentContext) {
         let pageProps = {};
+        // TODO: fix AppComponentContext to return NextComponentType instead of React.ComponentType
+        const Page = Component as NextStatelessComponent;
 
-        if (Component.getInitialProps) {
-            pageProps = await Component.getInitialProps(ctx);
+        if (Page.getInitialProps) {
+            pageProps = await Page.getInitialProps(ctx);
         }
 
         return { pageProps };

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

@@ -5,6 +5,10 @@ interface NextComponentProps {
     example: string;
 }
 
+interface TypedQuery {
+    id?: string;
+}
+
 class ClassNext extends React.Component<NextComponentProps> {
     static async getInitialProps(ctx: NextContext) {
         const { example } = ctx.query;
@@ -18,6 +22,14 @@ class ClassNext extends React.Component<NextComponentProps> {
     }
 }
 
+class ClassNextWithTypedQuery extends React.Component {
+    static async getInitialProps(ctx: NextContext<TypedQuery>) {
+        const { id } = ctx.query;
+        const processQuery = (id?: string) => id;
+        processQuery(id);
+    }
+}
+
 const StatelessNext: NextStatelessComponent<NextComponentProps> = ({ example }) => (
     <div>I'm a stateless component! {example}</div>
 );