Parameter on `AppType` is used incorrectly

[zenflow]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

environment information

sandbox@sse-sandbox-xhvisb:/sandbox$ yarn next info
yarn run v1.22.19
$ /sandbox/node_modules/.bin/next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #58~20.04.1-Ubuntu SMP Tue Jun 14 11:29:12 UTC 2022
    Binaries:
      Node: 14.19.3
      npm: 6.14.17
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.0.3-canary.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.0.3-canary.4", newest: "13.0.3".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
Done in 0.84s.

Note: warning at the end seems to be because I'm using next@canary (as instructed) but canary version is older than latest official release. My issue is present in either version.

Describe the Bug

Prop types defined by the parameter on AppType are incorrectly applied to MyApp's props.pageProps instead of MyApp's props.

Expected Behavior

Expected TS types to correctly reflect runtime types.

Link to reproduction

https://codesandbox.io/s/polished-tree-xhvisb?file=/pages/_app.tsx

To Reproduce

1. Open the link to reproduction
2. Observe code on left (with TS errors) and the produced page on right.

There's a TS error on line 13, complaining Property 'foo' does not exist on type 'AppPropsType<any, MyInitialProps>', even though props.foo does exist at runtime.

Also, there's no TS error on line 14, even though props.pageProps.foo does not exist at runtime.

[mrkldshv]

Hey! I'd like to take this one.

[balazsorban44]

There is a slight runtime difference between App.getInitialProps and any page's getStaticProps, getServerSideProps and getInitialProps behavior. The latter 3 will populate pageProps, while App.getInitialProps will not.

[mrkldshv]

Should we extend the type and allow to pass two generics - for props and pageProps? @balazsorban44

[balazsorban44]

I don't don't think that's needed. pageProps should be a property of props.

[DarkShadow20]

Hi Guys, is this issue fixed?
I want to get started with open source contributions so wanted to pick this task.

[mkayander]

@DarkShadow20 Hi. There's one draft PR and one open & ready, which is mine, but they don't get much attention/priority.

Hello everyone, it's my first contribution hope this will solve the issue.

Sandbox Link: https://codesandbox.io/p/sandbox/gifted-wilson-xwk17e?selection=%5B%7B%22endColumn%22%3A5%2C%22endLineNumber%22%3A15%2C%22startColumn%22%3A5%2C%22startLineNumber%22%3A15%7D%5D&file=%2Fpages%2F_app.tsx

I think the problem is in the AppType<MyInitialProps> typescript is misinterpreting it and assigning MyInitialProps as pageProps type that's why it's not giving an error at pageProps.foo.
And according to official docs I used AppProps instead of AppType.

[hassan028]

I tried to solve the issue. Here is the output.

props.foo: bar
props.pageProps.foo: [object Object]

Here is the code link: https://codesandbox.io/s/upbeat-shtern-zzdhqm?file=/pages/_app.tsx