Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add type inference for getStaticProps and getServerSideProps #11842

Merged
merged 17 commits into from
May 27, 2020
Merged

Add type inference for getStaticProps and getServerSideProps #11842

merged 17 commits into from
May 27, 2020

Conversation

manuschillerdev
Copy link
Contributor

@manuschillerdev manuschillerdev commented Apr 12, 2020

This adds InferredStaticProps and InferredServerSideProps to the typings.

  • add types for type inference
  • add explanation to docs
  • tests - are there any?

inferred-props

What does it do:

As an alternative to declaring your Types manually with:

type Props = {
  posts: Post[]
}

export const getStaticProps: GetStaticProps<Props> = () => ({
  posts: await fetchMyPosts(),
})

export const MyComponent(props: Props) =>(
 // ...
);

we can now also infer the prop types with

export const getStaticProps = () => ({
  // given fetchMyPosts() returns type Post[]
  posts: await fetchMyPosts(),
})

export const MyComponent(props: InferredStaticProps<typeof getStaticProps>) =>(
 // props.posts will be of type Post[]
);

help / review wanted

  • I am no typescript expert. Although the solution works as intended for me, someone with more knowledge could probably improve the types. Any edge cases I missed?
  • are there any tests I should modify/ add?

@manuschillerdev
Copy link
Contributor Author

related to issue #11824

@ijjk
Copy link
Member

ijjk commented Apr 12, 2020

Stats from current PR

Default Server Mode
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 10.4s 10.7s ⚠️ +293ms
nodeModulesSize 61 MB 61 MB ⚠️ +812 B
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.24 kB 1.24 kB
_error.js gzip 3.15 kB 3.15 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 2.03 kB 2.03 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
index.html gzip 917 B 917 B
link.html gzip 926 B 926 B
withRouter.html gzip 915 B 915 B
Overall change 2.76 kB 2.76 kB

Serverless Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 12s 11.5s -518ms
nodeModulesSize 61 MB 61 MB ⚠️ +812 B
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e3d8.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.24 kB 1.24 kB
_error.js gzip 3.15 kB 3.15 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 2.03 kB 2.03 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_error.js gzip 233 kB 233 kB ⚠️ +50 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 956 B 956 B
index.js gzip 233 kB 233 kB -331 B
link.js gzip 243 kB 243 kB -36 B
routerDirect.js gzip 241 kB 241 kB -54 B
withRouter.js gzip 241 kB 241 kB -301 B
Overall change 1.19 MB 1.19 MB -672 B

@timneutkens
Copy link
Member

timneutkens commented Apr 13, 2020

Looks great to me, however I'd like to get @Timer @ijjk and @lfades's opinion on this one.

tests - are there any?

You can add tests for it to tests/integration/typescript

@lfades
Copy link
Member

lfades commented Apr 13, 2020

I like it, these are utility types not really related to the typing of core features, but can be useful if there's no need to define the props of a component.

Please read my suggestions 🙏

@ijjk
Copy link
Member

ijjk commented Apr 14, 2020

Stats from current PR

Default Server Mode
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 10.1s 10.3s ⚠️ +174ms
nodeModulesSize 55.5 MB 55.5 MB ⚠️ +776 B
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..a4ac.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.24 kB 1.24 kB
_error.js gzip 3.15 kB 3.15 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 2.03 kB 2.03 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
index.html gzip 927 B 927 B
link.html gzip 935 B 935 B
withRouter.html gzip 922 B 922 B
Overall change 2.78 kB 2.78 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 10.9s 11.1s ⚠️ +212ms
nodeModulesSize 55.5 MB 55.5 MB ⚠️ +776 B
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.25 kB 6.25 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..a4ac.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 56.3 kB 56.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 4.78 kB 4.78 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.78 kB 6.78 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.5 kB 51.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.24 kB 1.24 kB
_error.js gzip 3.15 kB 3.15 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 2.03 kB 2.03 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.86 kB 7.86 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 594 B 594 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.28 kB 5.28 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_error.js 557 kB 557 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 557 kB 557 kB
link.js 593 kB 593 kB
routerDirect.js 586 kB 586 kB
withRouter.js 586 kB 586 kB
Overall change 2.89 MB 2.89 MB

> = T extends (
context?: GetStaticPropsContext<Q>
) => Promise<GetStaticPropsResult<infer P>>
? GetStaticPropsResult<P>['props']
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the difference between this line and ? P ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my understanding P are the Props passed to GetStaticProps<Props> that have to be manually declared upfront, right?

GetStaticPropsResult['props'] would be the inferred types after the Promise was resolved.

But as I said I am no typescript expert and could easily be wrong about this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I mean is, can we make it work like this:

) => Promise<GetStaticPropsResult<infer P>>
  ? P

infer P should make P available, so there's no need to go for props inside the type.

@manuschillerdev
Copy link
Contributor Author

@lfades @timneutkens @Timer @ijjk thank you guys for your great feedback.
I tried to address most of your points earlier today and hope to finish up with the tests by tomorrow evening.

@timneutkens
Copy link
Member

@manuschillerdev sorry for taking a while to get back to you! We had a lot of new PRs opened in a short amount of time.

The code / docs looks good to me, can you add some integration tests to test/integration/typescript in order to make sure this new feature is working correctly 💯

@ijjk
Copy link
Member

ijjk commented May 26, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 11.7s 11.9s ⚠️ +243ms
nodeModulesSize 67.3 MB 67.3 MB ⚠️ +594 B
Page Load Tests Overall increase ✓
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
/ failed reqs 0 0
/ total time (seconds) 2.1 2.072 -0.03
/ avg req/sec 1190.43 1206.67 ⚠️ +16.24
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.178 1.129 -0.05
/error-in-render avg req/sec 2121.5 2213.82 ⚠️ +92.32
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..c03c.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 5.67 kB 5.67 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
index.html gzip 927 B 927 B
link.html gzip 936 B 936 B
withRouter.html gzip 924 B 924 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 13.1s 13s -74ms
nodeModulesSize 67.3 MB 67.3 MB ⚠️ +594 B
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..c03c.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 5.67 kB 5.67 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_error.js 876 kB 876 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 877 kB 877 kB
link.js 914 kB 914 kB
routerDirect.js 907 kB 907 kB
withRouter.js 907 kB 907 kB
Overall change 4.49 MB 4.49 MB

@ijjk
Copy link
Member

ijjk commented May 26, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 12.4s 12.3s -136ms
nodeModulesSize 67.3 MB 67.3 MB ⚠️ +528 B
Page Load Tests Overall increase ✓
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
/ failed reqs 0 0
/ total time (seconds) 2.238 2.159 -0.08
/ avg req/sec 1117.17 1158 ⚠️ +40.83
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.414 1.438 ⚠️ +0.02
/error-in-render avg req/sec 1767.58 1738.3 -29.28
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..c03c.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 5.67 kB 5.67 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
index.html gzip 927 B 927 B
link.html gzip 936 B 936 B
withRouter.html gzip 924 B 924 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 13.2s 13.4s ⚠️ +249ms
nodeModulesSize 67.3 MB 67.3 MB ⚠️ +528 B
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..c03c.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 5.67 kB 5.67 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_error.js 876 kB 876 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 877 kB 877 kB
link.js 914 kB 914 kB
routerDirect.js 907 kB 907 kB
withRouter.js 907 kB 907 kB
Overall change 4.49 MB 4.49 MB

@ijjk
Copy link
Member

ijjk commented May 27, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 13.3s 13.9s ⚠️ +528ms
nodeModulesSize 67.3 MB 67.3 MB ⚠️ +552 B
Page Load Tests Overall increase ✓
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
/ failed reqs 0 0
/ total time (seconds) 2.38 2.358 -0.02
/ avg req/sec 1050.23 1060.36 ⚠️ +10.13
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.524 1.49 -0.03
/error-in-render avg req/sec 1640.12 1678.39 ⚠️ +38.27
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..c03c.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 5.67 kB 5.67 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
index.html gzip 927 B 927 B
link.html gzip 936 B 936 B
withRouter.html gzip 924 B 924 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 14.6s 14.5s -156ms
nodeModulesSize 67.3 MB 67.3 MB ⚠️ +552 B
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..c03c.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 5.67 kB 5.67 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_error.js 876 kB 876 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 877 kB 877 kB
link.js 914 kB 914 kB
routerDirect.js 907 kB 907 kB
withRouter.js 907 kB 907 kB
Overall change 4.49 MB 4.49 MB

lfades
lfades previously approved these changes May 27, 2020
Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manuschillerdev I've updated the types as they weren't working for all cases.

On another note, using this only makes sense if you don't use the parent type for the data fetching method, for example if you decide to do this:

const getStaticProps: GetStaticProps = () => {...}

The return type will be { [key: string]: any } as the type of the function will become GetStaticProps and inferring the returned props won't be possible anymore, unless you manually provide a type for the props (GetStaticProps<{ posts: Post[] }>), but in that case inferring the props becomes useless because you already have then defined and is better to just use them directly.

However, in the case of not using GetStaticProps, then the types added here can still be useful, check the tests added by @ijjk for more details.

I'm going to approve the PR but I'm not going to merge it yet until someone else from the team approves too.

@Timer The current names are okay and easy to use, they make sense when you're using then in the page, adding infer or type to the name usually never helps.

@ijjk
Copy link
Member

ijjk commented May 27, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 12.1s 12.3s ⚠️ +273ms
nodeModulesSize 67.3 MB 67.3 MB ⚠️ +552 B
Page Load Tests Overall increase ✓
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
/ failed reqs 0 0
/ total time (seconds) 2.165 2.156 -0.01
/ avg req/sec 1154.65 1159.62 ⚠️ +4.97
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.408 1.364 -0.04
/error-in-render avg req/sec 1775.32 1832.57 ⚠️ +57.25
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..c03c.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 5.67 kB 5.67 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
index.html gzip 927 B 927 B
link.html gzip 936 B 936 B
withRouter.html gzip 924 B 924 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
buildDuration 13.1s 13.3s ⚠️ +225ms
nodeModulesSize 67.3 MB 67.3 MB ⚠️ +552 B
Client Bundles (main, webpack, commons)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.js gzip 6.59 kB 6.59 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..c03c.js gzip 10.5 kB 10.5 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
main-HASH.module.js gzip 5.67 kB 5.67 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.92 kB 6.92 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.25 kB 3.25 kB
hooks.js gzip 881 B 881 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 8.22 kB 8.22 kB
Client Pages Modern
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_app.module.js gzip 604 B 604 B
_error.module.js gzip 2.04 kB 2.04 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 281 B 281 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.33 kB 5.33 kB
Client Build Manifests
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary manuschillerdev/next.js inferred-prop-types Change
_error.js 876 kB 876 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 877 kB 877 kB
link.js 914 kB 914 kB
routerDirect.js 907 kB 907 kB
withRouter.js 907 kB 907 kB
Overall change 4.49 MB 4.49 MB

Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm strongly against GetStaticProps and StaticProps as type names. There's no way to intuitively know the difference, let's please reconsider the name(s).

@lfades
Copy link
Member

lfades commented May 27, 2020

@Timer I like the current one because it's short and uses a name that's not taken by another type, and it makes sense to me. TypeScript (the docs) usually never adds things like type or infer in type names and it's not a good practice in the community unless the type name is taken.

Alternatives to StaticProps:

  • ReturnedStaticProps
  • InferStaticProps - maybe InferredStaticProps

The alternatives for ServerSideProps would be pretty much the same

GetStaticProps is out of discussion as that type isn't being added here.

We'll add them to docs so users don't have to guess them, guessing the type intuitively works when the type is the capitalized version of the method name, in this case I don't see how can we make it possible.

Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed StaticProps to InferGetStaticPropsType and ServerSideProps to InferGetServerSidePropsType

@lfades lfades requested a review from Timer May 27, 2020 18:22
Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@Timer Timer added this to the 9.4.3 milestone May 27, 2020
@kodiakhq kodiakhq bot merged commit 9f1b4f5 into vercel:canary May 27, 2020
@Vadorequest
Copy link
Contributor

This is very interesting, I didn't know about this TS feature.

I've implemented something similar to "manual types" in NRN:

This new way is interesting because it doesn't require to manually define types, it's automated based on type inference.

Are there limitations when using type inference?

@lfades
Copy link
Member

lfades commented May 28, 2020

@Vadorequest You can't use the type GetStaticProps or GetServerSideProps or otherwise you'll have to manually define the props. That's because TypeScript needs to infer the type of the function with the props, e.g:

export const getStaticProps = async () => { props: { posts } }

Will have the type:

const getStaticProps: () => Promise<{
    props: {
        posts: Post[];
    };
}>

But if you use GetStaticProps or GetServerSideProps the type will always be one of those two and you'll end up inferring from that type instead.

export const getStaticProps: GetStaticProps = async () => { props: { posts } }

Will have the type:

const getStaticProps: GetStaticProps<{
    [key: string]: any;
}, ParsedUrlQuery>

Inferring the props in this case will give you { [key: string]: any; }

@chapmanio
Copy link

Inferring the props in this case will give you { [key: string]: any; }

Is it possible to use this at all with strict mode enabled?

Screenshot 2020-06-29 at 19 40 32

rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
…11842)

This adds `InferredStaticProps` and `InferredServerSideProps` to the typings.

- [x] add types for type inference 
- [x] add explanation to docs
- [ ] tests - are there any?

![inferred-props](https://user-images.githubusercontent.com/56154253/79068041-24bcab00-7cc4-11ea-8397-ed1b95fbeca7.gif)

### What does it do:

As an alternative to declaring your Types manually with:
```typescript
type Props = {
  posts: Post[]
}

export const getStaticProps: GetStaticProps<Props> = () => ({
  posts: await fetchMyPosts(),
})

export const MyComponent(props: Props) =>(
 // ...
);
```

we can now also infer the prop types with
```typescript
export const getStaticProps = () => ({
  // given fetchMyPosts() returns type Post[]
  posts: await fetchMyPosts(),
})

export const MyComponent(props: InferredStaticProps<typeof getStaticProps>) =>(
 // props.posts will be of type Post[]
);

```

### help / review wanted
- [ ] I am no typescript expert. Although the solution works as intended for me, someone with more knowledge could probably improve the types. Any edge cases I missed?
- [ ] are there any tests I should modify/ add?
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants