diff --git a/README.md b/README.md index 6bcfdcc4..1e6758dd 100644 --- a/README.md +++ b/README.md @@ -230,7 +230,6 @@ Some differences from the "normal function" version: - `React.FunctionComponent` is explicit about the return type, while the normal function version is implicit (or else needs additional annotation). - It provides typechecking and autocomplete for static properties like `displayName`, `propTypes`, and `defaultProps`. - - Note that there are some known issues using `defaultProps` with `React.FunctionComponent`. See [this issue for details](https://github.com/typescript-cheatsheets/react/issues/87). We maintain a separate `defaultProps` section you can also look up. - Before the [React 18 type updates](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210), `React.FunctionComponent` provided an implicit definition of `children` (see below), which was heavily debated and is one of the reasons [`React.FC` was removed from the Create React App TypeScript template](https://github.com/facebook/create-react-app/pull/8177). @@ -352,7 +351,7 @@ Note that for React < 18, the function signature of `useCallback` typed argument ```ts function useCallback any>( callback: T, - deps: DependencyList + deps: DependencyList, ): T; ``` @@ -442,7 +441,7 @@ function DelayedEffect(props: { timerMs: number }) { setTimeout(() => { /* do stuff */ }, timerMs), - [timerMs] + [timerMs], ); // bad example! setTimeout implicitly returns a number // because the arrow function body isn't wrapped in curly braces @@ -628,7 +627,7 @@ export function useLoading() { }; return [isLoading, load] as [ boolean, - (aPromise: Promise) => Promise + (aPromise: Promise) => Promise, ]; } ``` @@ -795,7 +794,7 @@ Here are a few ways in which you can annotate `getDerivedStateFromProps` class Comp extends React.Component { static getDerivedStateFromProps( props: Props, - state: State + state: State, ): Partial | null { // } @@ -807,7 +806,7 @@ class Comp extends React.Component { ```tsx class Comp extends React.Component< Props, - ReturnType + ReturnType<(typeof Comp)["getDerivedStateFromProps"]> > { static getDerivedStateFromProps(props: Props) {} } @@ -1265,7 +1264,7 @@ Here are a few ways in which you can annotate `getDerivedStateFromProps` class Comp extends React.Component { static getDerivedStateFromProps( props: Props, - state: State + state: State, ): Partial | null { // } @@ -1277,7 +1276,7 @@ class Comp extends React.Component { ```tsx class Comp extends React.Component< Props, - ReturnType + ReturnType<(typeof Comp)["getDerivedStateFromProps"]> > { static getDerivedStateFromProps(props: Props) {} } @@ -1365,10 +1364,10 @@ class App extends React.Component { Instead of typing the arguments and return values with `React.FormEvent<>` and `void`, you may alternatively apply types to the event handler itself (_contributed by @TomasHubelbauer_): ```tsx - // typing on LEFT hand side of = - onChange: React.ChangeEventHandler = (e) => { - this.setState({text: e.currentTarget.value}) - } +// typing on LEFT hand side of = +onChange: React.ChangeEventHandler = (e) => { + this.setState({ text: e.currentTarget.value }); +}; ```
@@ -1545,7 +1544,7 @@ const useCurrentUser = () => { if (!currentUserContext) { throw new Error( - "useCurrentUser has to be used within " + "useCurrentUser has to be used within ", ); } @@ -1583,7 +1582,7 @@ Another option is to use an empty object as default value and cast it to the exp ```tsx const CurrentUserContext = createContext( - {} as CurrentUserContextType + {} as CurrentUserContextType, ); ``` @@ -1690,12 +1689,12 @@ interface Props { export const FancyButton = forwardRef( ( props: Props, - ref: Ref // <-- explicit immutable ref type + ref: Ref, // <-- explicit immutable ref type ) => ( - ) + ), ); ``` @@ -1758,7 +1757,7 @@ For true `forwardRef` behavior with generics, extend the module declaration: // Redeclare forwardRef to support generics declare module "react" { function forwardRef( - render: (props: P, ref: React.Ref) => React.ReactElement | null + render: (props: P, ref: React.Ref) => React.ReactElement | null, ): (props: P & React.RefAttributes) => React.ReactElement | null; } @@ -1772,7 +1771,7 @@ interface ClickableListProps { function ClickableListInner( props: ClickableListProps, - ref: ForwardedRef + ref: ForwardedRef, ) { return (
    @@ -1796,9 +1795,9 @@ If you need both generic support and proper forwardRef behavior with full type i ```tsx // Add to your type definitions (e.g. in `index.d.ts` file) interface ForwardRefWithGenerics extends React.FC> { - (props: WithForwardRefProps): ReturnType< - React.FC> - >; + ( + props: WithForwardRefProps, + ): ReturnType>>; } export const ClickableListWithForwardRef: ForwardRefWithGenerics = @@ -2112,7 +2111,7 @@ export enum ButtonSizes { // usage export const PrimaryButton = ( - props: Props & React.HTMLProps + props: Props & React.HTMLProps, ) => ; @@ -2468,7 +2467,7 @@ const useDarkMode = ( storageKey = "darkMode", storageProvider, global, - } = {} + } = {}, ) => { // ... return { @@ -2512,7 +2511,7 @@ declare module "use-dark-mode" { */ export default function useDarkMode( initialState?: boolean, - config?: DarkModeConfig + config?: DarkModeConfig, ): DarkMode; } ``` @@ -3001,3 +3000,5 @@ It is worth mentioning some resources to help you get started: ## Contributors This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. See [CONTRIBUTORS.md](/CONTRIBUTORS.md) for the full list. Contributions of any kind welcome! + +jiwoni