From fd67ee726851842c87491e50a5c9c1dfd9eeaa29 Mon Sep 17 00:00:00 2001 From: Jessica Date: Wed, 20 Feb 2019 16:12:32 +0900 Subject: [PATCH] Add some support for special cases using undefined with hooks --- types/react/index.d.ts | 25 +++++++++++++- types/react/test/hooks.tsx | 70 ++++++++++++++++++++++++++++++++++++-- 2 files changed, 91 insertions(+), 4 deletions(-) diff --git a/types/react/index.d.ts b/types/react/index.d.ts index bc9c4ce342..97adab18d4 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -807,6 +807,14 @@ declare namespace React { * @see https://reactjs.org/docs/hooks-reference.html#usestate */ function useState(initialState: S | (() => S)): [S, Dispatch>]; + // convenience overload when first argument is ommitted + /** + * Returns a stateful value, and a function to update it. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usestate + */ + function useState(): [S | undefined, Dispatch>]; /** * An alternative to `useState`. * @@ -894,6 +902,20 @@ declare namespace React { */ // TODO (TypeScript 3.0): function useRef(initialValue: T|null): RefObject; + // convenience overload for potentially undefined initialValue / call with 0 arguments + // has a default to stop it from defaulting to {} instead + /** + * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument + * (`initialValue`). The returned object will persist for the full lifetime of the component. + * + * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable + * value around similar to how you’d use instance fields in classes. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#useref + */ + // TODO (TypeScript 3.0): + function useRef(): MutableRefObject; /** * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations. * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside @@ -958,7 +980,8 @@ declare namespace React { * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usememo */ - function useMemo(factory: () => T, deps: DependencyList): T; + // allow undefined, but don't make it optional as that is very likely a mistake + function useMemo(factory: () => T, deps: DependencyList | undefined): T; /** * `useDebugValue` can be used to display a label for custom hooks in React DevTools. * diff --git a/types/react/test/hooks.tsx b/types/react/test/hooks.tsx index 26ff634e89..70ea9a0ce7 100644 --- a/types/react/test/hooks.tsx +++ b/types/react/test/hooks.tsx @@ -100,9 +100,46 @@ function useEveryHook(ref: React.Ref<{ id: number }>|undefined): () => boolean { // inline object, to (manually) check if autocomplete works React.useReducer(reducer, { age: 42, name: 'The Answer' }); - // make sure this is not going to the |null overload - // $ExpectType MutableRefObject - const didLayout = React.useRef(false); + // test useRef and its convenience overloads + // $ExpectType MutableRefObject + React.useRef(0); + + // these are not very useful (can't assign anything else to .current) + // but it's the only safe way to resolve them + // $ExpectType MutableRefObject + React.useRef(null); + // $ExpectType MutableRefObject + React.useRef(undefined); + + // |null convenience overload + // it should _not_ be mutable if the generic argument doesn't include null + // $ExpectType RefObject + React.useRef(null); + // but it should be mutable if it does (i.e. is not the convenience overload) + // $ExpectType MutableRefObject + React.useRef(null); + + // |undefined convenience overload + // with no contextual type or generic argument it should default to undefined only (not {} or unknown!) + // $ExpectType MutableRefObject + React.useRef(); + // $ExpectType MutableRefObject + React.useRef(); + // don't just accept a potential undefined if there is a generic argument + // $ExpectError + React.useRef(undefined); + // make sure once again there's no |undefined if the initial value doesn't either + // $ExpectType MutableRefObject + React.useRef(1); + // and also that it is not getting erased if the parameter is wider + // $ExpectType MutableRefObject + React.useRef(1); + + // should be contextually typed + const a: React.MutableRefObject = React.useRef(undefined); + const b: React.MutableRefObject = React.useRef(); + const c: React.MutableRefObject = React.useRef(null); + const d: React.RefObject = React.useRef(null); const id = React.useMemo(() => Math.random(), []); React.useImperativeHandle(ref, () => ({ id }), [id]); @@ -110,6 +147,10 @@ function useEveryHook(ref: React.Ref<{ id: number }>|undefined): () => boolean { // $ExpectError React.useImperativeMethods(ref, () => ({}), [id]); + // make sure again this is not going to the |null convenience overload + // $ExpectType MutableRefObject + const didLayout = React.useRef(false); + React.useLayoutEffect(() => { setState(1); setState(prevState => prevState - 1); @@ -140,6 +181,29 @@ function useEveryHook(ref: React.Ref<{ id: number }>|undefined): () => boolean { React.useDebugValue(id, value => value.toFixed()); React.useDebugValue(id); + // allow passing an explicit undefined + React.useMemo(() => {}, undefined); + // but don't allow it to be missing + // $ExpectError + React.useMemo(() => {}); + + // useState convenience overload + // default to undefined only (not that useful, but type-safe -- no {} or unknown!) + // $ExpectType undefined + React.useState()[0]; + // $ExpectType number | undefined + React.useState()[0]; + // default overload + // $ExpectType number + React.useState(0)[0]; + // $ExpectType undefined + React.useState(undefined)[0]; + // make sure the generic argument does reject actual potentially undefined inputs + // $ExpectError + React.useState(undefined)[0]; + + // useReducer convenience overload + return React.useCallback(() => didLayout.current, []); }