Make App and Document component types similar to base type.

This commit is contained in:
João Vieira 2018-09-26 09:26:56 +01:00
parent ff11ea68ce
commit 3060dbf392
3 changed files with 15 additions and 9 deletions

7
types/next/app.d.ts vendored
View File

@ -42,10 +42,15 @@ export interface AppProps<Q extends DefaultQuery = DefaultQuery> {
* App component type. Differs from the default type because the context it passes
* to getInitialProps and the props is passes to the component are different.
*
* @template P Component props.
* @template IP Initial props returned from getInitialProps.
* @template C Context passed to getInitialProps.
*/
export type AppComponentType<IP = {}, C = NextAppContext> = NextComponentType<IP & AppProps, IP, C>;
export type AppComponentType<P = {}, IP = P, C = NextAppContext> = NextComponentType<
P & AppProps,
IP,
C
>;
export class Container extends React.Component {}
export default class App<P = {}> extends React.Component<P & DefaultAppIProps & AppProps> {

View File

@ -88,11 +88,12 @@ export interface NextScriptProps {
* Document component type. Differs from the default type because the context it passes
* to getInitialProps and the props is passes to the component are different.
*
* @template P Component props.
* @template IP Initial props returned from getInitialProps.
* @template C Context passed to getInitialProps.
*/
export type DocumentComponentType<IP = {}, C = NextDocumentContext> = NextComponentType<
IP & DocumentProps,
export type DocumentComponentType<P = {}, IP = P, C = NextDocumentContext> = NextComponentType<
P & DocumentProps,
IP,
C
>;

View File

@ -2,8 +2,8 @@ import * as React from "react";
import App, { Container, NextAppContext, AppProps, AppComponentType } from "next/app";
import { DefaultQuery } from "next/router";
interface NextComponentProps {
example: string;
interface TestAppProps {
pageProps: any;
}
interface TypedQuery extends DefaultQuery {
@ -21,10 +21,10 @@ class TestApp extends App {
}
}
class TestAppWithProps extends App<NextComponentProps> {
class TestAppWithProps extends App<TestAppProps & WithExampleProps> {
static async getInitialProps({ Component, router, ctx }: NextAppContext) {
const pageProps = Component.getInitialProps && (await Component.getInitialProps(ctx));
return { pageProps, example: "foobar" };
return { pageProps };
}
render() {
@ -56,7 +56,7 @@ interface TestProps {
// Stateful HOC that adds props to wrapped component. Similar to what withRedux does.
// tslint:disable-next-line no-unnecessary-generics
const withExample = <P extends {}>(App: AppComponentType<P & WithExampleProps>) =>
const withExample = <P extends {}>(App: AppComponentType<P & WithExampleProps, P>) =>
class extends React.Component<P & AppProps & WithExampleHocProps> {
test: string;
@ -79,7 +79,7 @@ const withExample = <P extends {}>(App: AppComponentType<P & WithExampleProps>)
// Basic stateless HOC. Similar to what withAuth would do.
// tslint:disable-next-line no-unnecessary-generics
const withBasic = <P extends {}, C extends {}>(App: AppComponentType<P, C>) =>
const withBasic = <P extends {}, C extends {}>(App: AppComponentType<P, P, C>) =>
class extends React.Component<P & AppProps> {
static async getInitialProps(context: C) {
const pageProps = App.getInitialProps && (await App.getInitialProps(context));