Preparing for React 18: useCallback will no longer be typed as any

Author: shepmaster

ui/frontend/AdvancedOptionsMenu.tsx

@@ -16,8 +16,8 @@ const AdvancedOptionsMenu: React.FC = () => {
 
   const dispatch = useDispatch();
 
-  const changeEdition = useCallback((e) => dispatch(actions.changeEdition(e)), [dispatch]);
-  const changeBacktrace = useCallback((b) => dispatch(actions.changeBacktrace(b)), [dispatch]);
+  const changeEdition = useCallback((e: Edition) => dispatch(actions.changeEdition(e)), [dispatch]);
+  const changeBacktrace = useCallback((b: Backtrace) => dispatch(actions.changeBacktrace(b)), [dispatch]);
 
   return (
     <MenuGroup title="Advanced options">

ui/frontend/ChannelMenu.tsx

@@ -24,7 +24,7 @@ const ChannelMenu: React.FC<ChannelMenuProps> = props => {
   const nightlyVersionDetails = useSelector(selectors.nightlyVersionDetailsText);
 
   const dispatch = useDispatch();
-  const changeChannel = useCallback((channel) => {
+  const changeChannel = useCallback((channel: Channel) => {
     dispatch(actions.changeChannel(channel));
     props.close();
   }, [dispatch, props]);

ui/frontend/ConfigElement.tsx

@@ -4,46 +4,47 @@ import MenuItem from './MenuItem';
 
 import styles from './ConfigElement.module.css';
 
-interface EitherProps extends ConfigElementProps {
+interface EitherProps<T extends string> extends ConfigElementProps {
   id: string;
   a: string;
   b: string;
   aLabel?: string;
   bLabel?: string;
-  value: string;
-  onChange: (_: string) => any;
+  value: T;
+  onChange: (_: T) => any;
 }
 
-export const Either: React.FC<EitherProps> =
-  ({ id, a, b, aLabel = a, bLabel = b, value, onChange, ...rest }) => (
+export const Either =
+  <T extends string,>({ id, a, b, aLabel = a, bLabel = b, value, onChange, ...rest }: EitherProps<T>) => (
     <ConfigElement {...rest}>
       <div className={styles.toggle}>
         <input id={`${id}-a`}
           name={id}
           value={a}
           type="radio"
           checked={value === a}
-          onChange={() => onChange(a)} />
+          onChange={() => onChange(a as T)} />
         <label htmlFor={`${id}-a`}>{aLabel}</label>
         <input id={`${id}-b`}
           name={id}
           value={b}
           type="radio"
           checked={value === b}
-          onChange={() => onChange(b)} />
+          onChange={() => onChange(b as T)} />
         <label htmlFor={`${id}-b`}>{bLabel}</label>
       </div>
     </ConfigElement>
   );
 
-interface SelectProps extends ConfigElementProps {
-  value: string;
-  onChange: (_: string) => any;
+interface SelectProps<T extends string> extends ConfigElementProps {
+  children: React.ReactNode;
+  value: T;
+  onChange: (_: T) => any;
 }
 
-export const Select: React.FC<SelectProps> = ({ value, onChange, children, ...rest }) => (
+export const Select = <T extends string,>({ value, onChange, children, ...rest }: SelectProps<T>) => (
   <ConfigElement {...rest}>
-    <select className={styles.select} value={value} onChange={e => onChange(e.target.value)}>
+    <select className={styles.select} value={value} onChange={e => onChange(e.target.value as T)}>
       {children}
     </select>
   </ConfigElement>

ui/frontend/ConfigMenu.tsx

@@ -37,15 +37,19 @@ const ConfigMenu: React.FC<ConfigMenuProps> = () => {
   const processAssembly = useSelector((state: State) => state.configuration.processAssembly);
 
   const dispatch = useDispatch();
-  const changeAceTheme = useCallback((t) => dispatch(actions.changeAceTheme(t)), [dispatch]);
-  const changeMonacoTheme = useCallback((t) => dispatch(actions.changeMonacoTheme(t)), [dispatch]);
-  const changeKeybinding = useCallback((k) => dispatch(actions.changeKeybinding(k)), [dispatch]);
-  const changeOrientation = useCallback((o) => dispatch(actions.changeOrientation(o)), [dispatch]);
-  const changeEditorStyle = useCallback((e) => dispatch(actions.changeEditor(e)), [dispatch]);
-  const changeAssemblyFlavor = useCallback((a) => dispatch(actions.changeAssemblyFlavor(a)), [dispatch]);
-  const changePairCharacters = useCallback((p) => dispatch(actions.changePairCharacters(p)), [dispatch]);
-  const changeProcessAssembly = useCallback((p) => dispatch(actions.changeProcessAssembly(p)), [dispatch]);
-  const changeDemangleAssembly = useCallback((d) => dispatch(actions.changeDemangleAssembly(d)), [dispatch]);
+  const changeAceTheme = useCallback((t: string) => dispatch(actions.changeAceTheme(t)), [dispatch]);
+  const changeMonacoTheme = useCallback((t: string) => dispatch(actions.changeMonacoTheme(t)), [dispatch]);
+  const changeKeybinding = useCallback((k: string) => dispatch(actions.changeKeybinding(k)), [dispatch]);
+  const changeOrientation = useCallback((o: Orientation) => dispatch(actions.changeOrientation(o)), [dispatch]);
+  const changeEditorStyle = useCallback((e: Editor) => dispatch(actions.changeEditor(e)), [dispatch]);
+  const changeAssemblyFlavor =
+    useCallback((a: AssemblyFlavor) => dispatch(actions.changeAssemblyFlavor(a)), [dispatch]);
+  const changePairCharacters =
+    useCallback((p: PairCharacters) => dispatch(actions.changePairCharacters(p)), [dispatch]);
+  const changeProcessAssembly =
+    useCallback((p: ProcessAssembly) => dispatch(actions.changeProcessAssembly(p)), [dispatch]);
+  const changeDemangleAssembly =
+    useCallback((d: DemangleAssembly) => dispatch(actions.changeDemangleAssembly(d)), [dispatch]);
 
   return (
     <Fragment>

ui/frontend/ModeMenu.tsx

@@ -15,7 +15,7 @@ interface ModeMenuProps {
 const ModeMenu: React.FC<ModeMenuProps> = props => {
   const mode = useSelector((state: State) => state.configuration.mode);
   const dispatch = useDispatch();
-  const changeMode = useCallback((mode) => {
+  const changeMode = useCallback((mode: Mode) => {
     dispatch(actions.changeMode(mode));
     props.close();
   }, [dispatch, props]

ui/frontend/editor/AceEditor.tsx

@@ -200,7 +200,7 @@ const AceEditor: React.FC<AceEditorProps> = props => {
   const previouslyNotified = useRef<string[]>([]);
   const onEditCodeDebounced = useRafDebouncedFunction(
     props.onEditCode,
-    useCallback(code => previouslyNotified.current.push(code), [previouslyNotified]),
+    useCallback((code: string) => previouslyNotified.current.push(code), [previouslyNotified]),
   );
 
   useEditorProp(editor, onEditCodeDebounced, useCallback((editor, onEditCode) => {

ui/frontend/editor/Editor.tsx

@@ -125,7 +125,7 @@ const Editor: React.FC = () => {
 
   const dispatch = useAppDispatch();
   const execute = useCallback(() => dispatch(actions.performPrimaryAction()), [dispatch]);
-  const onEditCode = useCallback((c) => dispatch(actions.editCode(c)), [dispatch]);
+  const onEditCode = useCallback((c: string) => dispatch(actions.editCode(c)), [dispatch]);
 
   const SelectedEditor = editorMap[editor];
 

ui/frontend/uss-router/Link.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react';
+import React, { useContext, useCallback, MouseEventHandler } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Context } from './Router';
@@ -16,7 +16,7 @@ const Link: React.FC<LinkProps> = (props) => {
   const router = useContext(Context);
   const { action, onClick, children, ...anchorProps } = props;
 
-  const realOnClick = useCallback(e => {
+  const realOnClick: MouseEventHandler<HTMLAnchorElement> = useCallback((e) => {
     if (onClick) {
       onClick();
     } else if (action) {