From 15ef8ee4de3f7a3a4af9355b2eaa27c1aafcc4d6 Mon Sep 17 00:00:00 2001 From: swyx Date: Wed, 19 Aug 2020 22:37:44 +0800 Subject: [PATCH 1/6] document new VoidFunctionComponent type closes https://github.com/typescript-cheatsheets/react/issues/268 --- .../getting-started/function-components.md | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/docs/basic/getting-started/function-components.md b/docs/basic/getting-started/function-components.md index 22192b70..ded001c9 100644 --- a/docs/basic/getting-started/function-components.md +++ b/docs/basic/getting-started/function-components.md @@ -12,7 +12,7 @@ const App = ({ message }: AppProps) =>
{message}
;
-What about `React.FC`/`React.FunctionComponent`? +What about `React.FC`/`React.FunctionComponent`/`React.VoidFunctionComponent`? You can also write components with `React.FunctionComponent` (or the shorthand `React.FC` - they are the same): @@ -39,6 +39,30 @@ const Title: React.FunctionComponent<{ title: string }> = ({ }) =>
{children}
; ``` +
+ + +As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare a component that explicitly does not have children. + + + + + +```ts +const VoidFunctionComponent: React.VoidFunctionComponent = ({ foo }: Props) => { + return
{foo}
; // OK +}; +; + +const VoidFunctionComponent2: React.VoidFunctionComponent = ({ foo, children /* ERROR */ }) => { + return
{foo}{children}
; +}; +``` + + +
+ + - _In the future_, it may automatically mark props as `readonly`, though that's a moot point if the props object is destructured in the parameter list. In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of `React.FunctionComponent`. From 10b46aabec689376f22967a315f64b9b61f5e692 Mon Sep 17 00:00:00 2001 From: swyx Date: Wed, 19 Aug 2020 22:48:15 +0800 Subject: [PATCH 2/6] Update docs/basic/getting-started/function-components.md Co-authored-by: Sebastian Silbermann --- docs/basic/getting-started/function-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic/getting-started/function-components.md b/docs/basic/getting-started/function-components.md index ded001c9..28f4dfc2 100644 --- a/docs/basic/getting-started/function-components.md +++ b/docs/basic/getting-started/function-components.md @@ -42,7 +42,7 @@ const Title: React.FunctionComponent<{ title: string }> = ({
-As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare a component that explicitly does not have children. +As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare the accepted `children` explicitly. From 2c49387f8ad022f7be54a1c4cd811ca58960c515 Mon Sep 17 00:00:00 2001 From: swyx Date: Wed, 19 Aug 2020 22:51:58 +0800 Subject: [PATCH 3/6] Update function-components.md --- docs/basic/getting-started/function-components.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/basic/getting-started/function-components.md b/docs/basic/getting-started/function-components.md index 28f4dfc2..ae2f9b19 100644 --- a/docs/basic/getting-started/function-components.md +++ b/docs/basic/getting-started/function-components.md @@ -42,24 +42,28 @@ const Title: React.FunctionComponent<{ title: string }> = ({
-As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare the accepted `children` explicitly. +As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare the accepted `children` explicitly. This is an interim solution until the next major version of the type defs (where VoidFunctionComponent will be deprecated and FunctionComponent will by default accept no children). ```ts -const VoidFunctionComponent: React.VoidFunctionComponent = ({ foo }: Props) => { - return
{foo}
; // OK +type Props = { foo: string } + +// OK now, in future, error +const FunctionComponent: React.FunctionComponent = ({ foo, children }: Props) => { + return
{foo} {children}
; // OK }; -; -const VoidFunctionComponent2: React.VoidFunctionComponent = ({ foo, children /* ERROR */ }) => { +// Error now, in future, deprecated +const VoidFunctionComponent: React.VoidFunctionComponent = ({ foo, children }) => { return
{foo}{children}
; }; ``` +
From b2e12f2c7d16634dd2d5809a48f23b34309d2e40 Mon Sep 17 00:00:00 2001 From: swyx Date: Thu, 20 Aug 2020 23:19:27 +0800 Subject: [PATCH 4/6] Update docs/basic/getting-started/function-components.md Co-authored-by: Sebastian Silbermann --- docs/basic/getting-started/function-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic/getting-started/function-components.md b/docs/basic/getting-started/function-components.md index ae2f9b19..eed5c178 100644 --- a/docs/basic/getting-started/function-components.md +++ b/docs/basic/getting-started/function-components.md @@ -42,7 +42,7 @@ const Title: React.FunctionComponent<{ title: string }> = ({
-As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare the accepted `children` explicitly. This is an interim solution until the next major version of the type defs (where VoidFunctionComponent will be deprecated and FunctionComponent will by default accept no children). +As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare the accepted `children` explicitly. This is an interim solution until FunctionComponent will by default accept no children (planned for React 18). From c7a23b8e7e1f2759b41a22f9545284b1eb674cca Mon Sep 17 00:00:00 2001 From: swyx Date: Thu, 20 Aug 2020 23:20:43 +0800 Subject: [PATCH 5/6] Update function-components.md --- docs/basic/getting-started/function-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic/getting-started/function-components.md b/docs/basic/getting-started/function-components.md index eed5c178..84c95b5e 100644 --- a/docs/basic/getting-started/function-components.md +++ b/docs/basic/getting-started/function-components.md @@ -42,7 +42,7 @@ const Title: React.FunctionComponent<{ title: string }> = ({
-As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare the accepted `children` explicitly. This is an interim solution until FunctionComponent will by default accept no children (planned for React 18). +As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643) (TODO: update with @types/react version when merged), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare the accepted `children` explicitly. This is an interim solution until FunctionComponent will accept no children by default (planned for React 18). From 6d3cdc62c3c99a06f6f5818b80ab76b90d4d9c59 Mon Sep 17 00:00:00 2001 From: swyx Date: Fri, 21 Aug 2020 00:39:00 +0800 Subject: [PATCH 6/6] fix format --- .../getting-started/function-components.md | 30 ++++++++++++------- docs/migration/from-js.md | 2 +- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/docs/basic/getting-started/function-components.md b/docs/basic/getting-started/function-components.md index 84c95b5e..ff8662b0 100644 --- a/docs/basic/getting-started/function-components.md +++ b/docs/basic/getting-started/function-components.md @@ -46,27 +46,37 @@ As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyType - - ```ts -type Props = { foo: string } +type Props = { foo: string }; // OK now, in future, error -const FunctionComponent: React.FunctionComponent = ({ foo, children }: Props) => { - return
{foo} {children}
; // OK +const FunctionComponent: React.FunctionComponent = ({ + foo, + children, +}: Props) => { + return ( +
+ {foo} {children} +
+ ); // OK }; // Error now, in future, deprecated -const VoidFunctionComponent: React.VoidFunctionComponent = ({ foo, children }) => { - return
{foo}{children}
; +const VoidFunctionComponent: React.VoidFunctionComponent = ({ + foo, + children, +}) => { + return ( +
+ {foo} + {children} +
+ ); }; ``` - -
- - _In the future_, it may automatically mark props as `readonly`, though that's a moot point if the props object is destructured in the parameter list. In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of `React.FunctionComponent`. diff --git a/docs/migration/from-js.md b/docs/migration/from-js.md index cf03a5f1..2210345a 100644 --- a/docs/migration/from-js.md +++ b/docs/migration/from-js.md @@ -8,7 +8,7 @@ title: From JS - [TypeStat](https://github.com/JoshuaKGoldberg/TypeStat) ([used by Codecademy](https://mobile.twitter.com/JoshuaKGoldberg/status/1159090281314160640)) - [TypeWiz](https://github.com/urish/typewiz) - [js-to-ts-converter](https://github.com/gregjacobs/js-to-ts-converter) -- [TS-migrate](https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc) from Airbnb +- [TS-migrate](https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc) from Airbnb ## Manual JS to TS Conversion