React Hooks in TypeScript

useState

// 推断数字类型
const [value, setValue] = useState(0);
// 明确设定类型
const [value, setValue] = useState<number | undefined>(undefined);
const [value, setValue] = useState<Array<number>>([]);
interface MyObject {
  foo: string;
  bar?: number;
}
const [value, setValue] = useState<MyObject>({ foo: 'hello' });

useContext

type Theme = 'light' | 'dark';
const ThemeContext = createContext<Theme>('dark');
const App = () => (
  <ThemeContext.Provider value="dark">
    <MyComponent />
  </ThemeContext.Provider>
)
const MyComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>The theme is {theme}</div>;
}

useEffect / useLayoutEffect

因为它们不处理返回值，所以不需要任何类型。

useEffect(() => {
  const subscriber = subscribe(options);
  return () => {
    unsubscribe(subscriber)
  };
}, [options]);

useMemo / useCallback

const value = 10;
// 推断为数字类型
const result = useMemo(() => value * 2, [value]);
const multiplier = 2;
// 推断为 (value: number) => number
const multiply = useCallback((value: number) => value * multiplier, [multiplier]);

useRef

一般而言，useRef 有一个只读属性 current ，用来指向DOM节点：

const MyInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  return <input ref={inputRef} />
}

useRef也可以用于类的示例属性：

const myNumberRef = useRef(0);
myNumberRef.current += 1;

useReducer

interface State {
  value: number;
}
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'incrementAmount'; amount: number };
const counterReducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return { value: state.value + 1 };
    case 'decrement':
      return { value: state.value - 1 };
    case 'incrementAmount':
      return { value: state.value + action.amount };
    default:
      throw new Error();
  }
};
const [state, dispatch] = useReducer(counterReducer, { value: 0 });
dispatch({ type: 'increment' });
dispatch({ type: 'decrement' });
dispatch({ type: 'incrementAmount', amount: 10 });
// TypeScript compilation error
dispatch({ type: 'invalidActionType' });

useImperativeHandle

export interface MyInputHandles {
  focus(): void;
}
const MyInput: RefForwardingComponent<MyInputHandles, MyInputProps> = (
  props,
  ref
) => {
  const inputRef = useRef<HTMLInputElement>(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    },
  }));
  return <input {...props} ref={inputRef} />;
};
export default forwardRef(MyInput);

import MyInput, { MyInputHandles } from './MyInput';
const Autofocus = () => {
  const myInputRef = useRef<MyInputHandles>(null);
  useEffect(() => {
    if (myInputRef.current) {
      myInputRef.current.focus();
    }
  });
  return <MyInput ref={myInputRef} />
}

useDebugValue

useDebugValue用于在React Developer Tools 中显示值，并接受一个值和一个可选的格式化函数，可以根据传入的值推断其类型。

const date = new Date();
useDebugValue(date, date => date.toISOString());

• React Hooks in TypeScript